/**
 * @file _icon.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * @@VERSION@@
 * @brief Styles für die Icon Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Icon Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 * Variationen (small, default, large und x-large).
 */

@use "sass:map";
@use '../utilities/functions';

@use '../utilities/icons';
@use "../utilities/mixins";

.kern-icon {
    display: inline-block;
    width: var(--kern-metric-dimension-default, 24px);
    height: var(--kern-metric-dimension-default, 24px);
    min-width: var(--kern-metric-dimension-default, 24px);
    min-height: var(--kern-metric-dimension-default, 24px);

    @each $name, $size in icons.$sizes {
        &--#{$name} {
            width: $size;
            min-width: $size;
            height: $size;
            min-height: $size;
        }
    }

    @each $name, $url in icons.$icons {
        &--#{$name} {
            -webkit-mask: $url;
            mask: $url;
            background-color: var(--kern-color-layout-text-default, #171a2b);
            @include mixins.forced-colors-style;
        }
    }
}