/**
 * @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 16.12.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;
    @include mixins.icon-default;

    @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-contextual, #131525);
            @include mixins.forced-colors-style;
        }
    }
}