@import './var.scss';

:root {
    --tag-padding: #{$tag-padding};
    --tag-margin: #{$tag-margin};
    --tag-text-color: #{$tag-text-color};
    --tag-font-size: #{$tag-font-size};
    --tag-line-height: #{$tag-line-height};
    --tag-border-radius: #{$tag-border-radius};
    --tag-primary-color: #{$tag-primary-color};
    --tag-primary-bg: #{$tag-primary-bg};
    --tag-second-color: #{$tag-second-color};
    --tag-second-bg: #{$tag-second-bg};
    --tag-normal-color: #{$tag-normal-color};
    --tag-normal-bg: #{$tag-normal-bg};
    --tag-disabled-color: #{$tag-disabled-color};
    --tag-disabled-bg: #{$tag-disabled-bg};
    --tag-medium-padding: #{$tag-medium-padding};
    --tag-large-padding: #{$tag-large-padding};
    --tag-large-border-radius: #{$tag-large-border-radius};
    --tag-large-font-size: #{$tag-large-font-size};
    --tag-primary-active-color: #{$tag-primary-active-color};
    --tag-primary-active-bg: #{$tag-primary-active-bg};
    --tag-second-active-color: #{$tag-second-active-color};
    --tag-second-active-bg: #{$tag-second-active-bg};
    --tag-normal-active-color: #{$tag-normal-active-color};
    --tag-normal-active-bg: #{$tag-normal-active-bg};
}

.jing-tag {
    position: relative;
    display: inline-block;
    line-height: var(--tag-line-height);
    margin-right: var(--tag-margin);
    padding: var(--tag-padding);
    border-radius: var(--tag-border-radius);
    font-size: var(--tag-font-size);
    background-color: var(--bg-white);
    white-space: nowrap;
    text-overflow: ellipsis;

    &--primary {
        color: var(--tag-primary-color);
        background-color: var(--tag-primary-bg);

        &.jing-tag--active {
            color: var(--tag-primary-active-color);
            background: var(--gradient-primary);
        }
    }

    &--second {
        color: var(--tag-second-color);
        background-color: var(--tag-second-bg);

        &.jing-tag--active {
            color: var(--tag-second-active-color);
            background: var(--tag-second-active-bg);
        }
    }

    &--normal {
        color: var(--tag-normal-color);
        background-color: var(--tag-normal-bg);

        &.jing-tag--active {
            color: var(--tag-normal-active-color);
            background: var(--tag-normal-active-bg);
        }

        // &::before {
        //     position: absolute;
        //     top: 0;
        //     right: 0;
        //     bottom: 0;
        //     left: 0;
        //     border: 1px solid;
        //     border-color: inherit;
        //     border-radius: inherit;
        //     content: '';
        //     pointer-events: none;
        // }
    }

    &--disabled {
        color: var(--tag-disabled-color);
        background-color: var(--tag-disabled-bg);
    }

    &--medium {
        padding: var(--tag-medium-padding);
    }

    &--large {
        padding: var(--tag-large-padding);
        font-size: var(--tag-large-font-size);
        border-radius: var(--tag-large-border-radius);
    }
}