//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
//                                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

@use '../../variables.scss' as *;

// There are many icons throughout the settings. We have to ensure that they all are scaled
// and aligned properly even if they come from different icon themes. The flexbox-based
// approach below seems to work quite well. The first class can be used to properly scale
// and center icons in block divs; the second class is for inline icons.

.icon {
  :global(.icon-container) {
    container-type: size;
    width: 100%;
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;

    i {
      font-size: 75cqi;
      font-style: normal;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
