@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

$_cds-tag-border-radius: var(--cds-tag-br) !default; //config.$config-global-border-radius !default;


.cds-tag {
    height: vars.$cds-size-150;
    border-radius: $_cds-tag-border-radius;
    //padding: 0 0 0 vars.$cds-spacing-50;
    padding-inline: vars.$cds-spacing-25;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    width: min-content;
    /*
    &:not(:has(.cds-tag__icon)) {
        padding: 0 vars.$cds-spacing-50;
    }*/

    @include mixins.cds-primary;

    &[class^="__icon"],
    [class*="__icon "] {
        color: var(--cds-color-text-default);
    }

    &:hover {
        @include mixins.cds-primary--hover;
    }

    &:active {
        @include mixins.cds-primary--active;
    }

    &:disabled {
        pointer-events: none !important;
        @include mixins.cds-primary--disabled;
    }

    &__text {
        @include mixins.cds-paragraph-s;
        padding-inline: vars.$cds-spacing-50;
        white-space: pre;
    }

    &__close {
        padding: 0;
        height: vars.$cds-size-100;
        width: vars.$cds-size-100;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        cursor: pointer;
        @include mixins.cds-icon(config.$default-icon-close);

        &:focus-visible {
            border-radius: $_cds-tag-border-radius;
            background-color: var(--cds-color-background-default);
            color: var(--cds-color-text-default);
            border: 1px solid var(--cds-color-border-default);
            outline: 0 !important;
        }

        &::before {
            @include mixins.cds-icon-size(vars.$cds-icon-100);
        }

        &:hover {
            opacity: .5;
        }
    }

    //SIZE MODIFIERS
    &--small {
        height: min-content;

        .cds-tag__text {
            @include mixins.cds-paragraph-xs;
            padding-inline: vars.$cds-spacing-25;
            white-space: pre;
        }
    }

    &--medium {
        height: vars.$cds-size-150;

        .cds-tag__text {
            @include mixins.cds-paragraph-s;
            padding-inline: vars.$cds-spacing-50;
            white-space: pre;
        }
    }


    //ALTERNATIVE MODIFIERS
    @for $i from 1 through 10 {
        &--color-#{$i} {
            border: 1px solid;
            @include mixins.cds-color-alternative(#{$i});

            &:hover {
                @include mixins.cds-color-alternative--hover(#{$i});
            }

            &:active {
                @include mixins.cds-color-alternative--active(#{$i});
            }
        }
    }

    //VARIANT MODIFIERS
    &--accent {
        @include mixins.cds-accent;

        &:hover {
            @include mixins.cds-accent--hover;
        }

        &:active {
            @include mixins.cds-accent--active;
        }

        &:disabled {
            @include mixins.cds-accent--disabled;
        }
    }

    &--primary {
        @include mixins.cds-primary;

        &[class^="__icon"],
        [class*="__icon "] {
            color: var(--cds-color-text-default);
        }

        &:hover {
            @include mixins.cds-primary--hover;
        }

        &:active {
            @include mixins.cds-primary--active;
        }

        &:disabled {
            @include mixins.cds-primary--disabled;
        }
    }

    &--secondary {
        @include mixins.cds-secondary;

        &:hover {
            @include mixins.cds-secondary--hover;
        }

        &:active {
            @include mixins.cds-secondary--active;
        }

        &:disabled {
            @include mixins.cds-secondary--disabled;
        }
    }

    &--inverse {
        @include mixins.cds-inverse;

        &:hover {
            @include mixins.cds-inverse--hover;
        }

        &:active {
            @include mixins.cds-inverse--active;
        }

        &:disabled {
            @include mixins.cds-inverse--disabled;
        }
    }
}