/*------------------------------------*\
    ICON
\*------------------------------------*/
@use "sass:math";

.ds_icon {
    fill: currentColor;
    height: 1.5em;
    max-width: 1.5em;
    vertical-align: middle;
    width: 1.5em;
}

$icon-sizes: 16, 20, 24, 28, 32, 36, 40, 44, 48;
@each $icon-size in $icon-sizes {
    .ds_icon--#{$icon-size} {
        height: math.div($icon-size, 16) * 1rem;
        max-width: math.div($icon-size, 16) * 1rem;
        width: math.div($icon-size, 16) * 1rem;
    }
}

.ds_icon--fill {
    height: 100%;
    max-width: 100%;
    width: 100%;
}

.ds_icon--fit {
    width: auto;
}