@use '../../styles/variables.scss';
@use '../../styles/mixins/link.scss';
@use './mixin';
@use 'sass:map';
@use 'sass:list';

.#{variables.$thy-prefix}-tags {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    row-gap: variables.$tag-space-row-gap;
    column-gap: variables.$tag-space-column-gap;
}

.#{variables.$thy-prefix}-tag {
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    font-size: variables.$font-size-sm;
    border-radius: variables.$tag-border-radius;
    color: variables.$white;
    border: 1px solid transparent;
    padding: {
        left: map.get(variables.$tag-size-paddings, 'md');
        right: map.get(variables.$tag-size-paddings, 'md');
    }
    a {
        @include link.link-variant(inherit, none, inherit, none);
    }

    .thy-icon:first-child {
        margin-right: 4px;
    }

    &.thy-tag-pill {
        border-radius: 18px;
    }

    /**** size ****/
    @each $size, $height in variables.$tag-size-heights {
        &-#{$size} {
            $font-sizes: map.get(variables.$tag-size-font-sizes, $size);
            @include mixin.tag-size(
                $height,
                map.get(variables.$tag-size-paddings, $size),
                list.nth($font-sizes, 1),
                list.nth($font-sizes, 2)
            );
        }
    }

    /**** colors ****/
    @each $color, $value in variables.$tag-colors {
        &-#{$color} {
            @include mixin.tag-bg-variant($value);
            @include mixin.tag-color-variant(variables.$white, variables.$white);
        }
        &-weak-fill-#{$color} {
            @include mixin.tag-bg-variant(rgba($value, 0.1));
            @include mixin.tag-color-variant($value, $value);
        }
        &-outline-#{$color} {
            @include mixin.tag-border-variant($value, $value);
        }
    }

    /**** label type ****/
    &-default {
        @include mixin.tag-bg-variant(variables.$tag-default-bg, variables.$tag-default-hover-bg);
        @include mixin.tag-color-variant(variables.$tag-default-color, variables.$tag-default-color);
    }

    &-weak-fill-default {
        @include mixin.tag-bg-variant(variables.$tag-default-bg, variables.$tag-default-hover-bg);
        @include mixin.tag-color-variant(variables.$tag-default-color, variables.$tag-default-color);
    }

    &-outline-default {
        @include mixin.tag-border-variant(variables.$tag-default-color, variables.$tag-default-border-color);
    }

    &-outline {
        border-width: 1px;
        border-style: solid;
        background: transparent;
    }
}
