@use 'sass:color';
@use '../../styles/variables.scss';

@mixin tag-bg-variant($bg-color, $hover-bg-color: null) {
    & {
        background-color: $bg-color;
    }

    &.thy-tag-hover {
        &:hover {
            @if $hover-bg-color != null {
                background-color: $hover-bg-color;
            } @else {
                background-color: color.adjust($bg-color, $lightness: -5%);
            }
            cursor: variables.$hand-cursor;
        }
    }
}

@mixin tag-color-variant($color, $hover-color) {
    & {
        color: $color;
    }

    &.thy-tag-hover {
        thy-icon.thy-icon-close,
        &:hover {
            color: $hover-color;
            cursor: variables.$hand-cursor;
            thy-icon.thy-icon-close {
                display: inline-block;
            }
        }
    }
}

@mixin tag-border-variant($color, $border-color) {
    color: $color;
    border-color: $border-color;
}

@mixin tag-size($height, $padding-x, $font-size, $icon-font-size) {
    height: $height;
    line-height: $height;
    padding: {
        left: $padding-x;
        right: $padding-x;
    }
    font-size: $font-size;
    .i,
    .thy-icon {
        font-size: $icon-font-size;
    }
}
