﻿@import "../../../Styles/functions.scss";

.bit-tag {
    line-height: 1;
    gap: spacing(1);
    overflow: hidden;
    align-items: center;
    display: inline-flex;
    font-family: $tg-font-family;
    font-weight: $tg-font-weight;
    border-style: $shp-border-style;
    border-width: $shp-border-width;
    border-radius: $shp-border-radius;
    padding: var(--bit-tag-padding);
    font-size: var(--bit-tag-fontsize);
    min-height: var(--bit-tag-minheight);

    &.bit-dis {
        cursor: default;
        user-select: none;
        color: $clr-fg-dis;
        pointer-events: none;
    }
}

.bit-tag-rvs {
    flex-direction: row-reverse;
}

.bit-tag-cls {
    padding: 0;
    border: none;
    display: flex;
    color: inherit;
    cursor: pointer;
    box-sizing: border-box;
    background-color: transparent;
    font-size: var(--bit-tag-fontsize);
}


.bit-tag-fil {
    color: var(--bit-tag-clr-txt);
    border-color: var(--bit-tag-clr);
    background-color: var(--bit-tag-clr);

    &.bit-dis {
        border-color: $clr-brd-dis;
        background-color: $clr-bg-dis;
    }
}

.bit-tag-otl {
    color: var(--bit-tag-clr);
    border-color: var(--bit-tag-clr);
    background-color: transparent;

    &.bit-dis {
        border-color: $clr-brd-dis;
        background-color: transparent;
    }
}

.bit-tag-txt {
    color: var(--bit-tag-clr);
    border-color: transparent;
    background-color: transparent;

    &.bit-dis {
        border-color: transparent;
        background-color: transparent;
    }
}

.bit-tag-pri {
    --bit-tag-clr: #{$clr-pri};
    --bit-tag-clr-txt: #{$clr-pri-text};
}

.bit-tag-sec {
    --bit-tag-clr: #{$clr-sec};
    --bit-tag-clr-txt: #{$clr-sec-text};
}

.bit-tag-ter {
    --bit-tag-clr: #{$clr-ter};
    --bit-tag-clr-txt: #{$clr-ter-text};
}

.bit-tag-inf {
    --bit-tag-clr: #{$clr-inf};
    --bit-tag-clr-txt: #{$clr-inf-text};
}

.bit-tag-suc {
    --bit-tag-clr: #{$clr-suc};
    --bit-tag-clr-txt: #{$clr-suc-text};
}

.bit-tag-wrn {
    --bit-tag-clr: #{$clr-wrn};
    --bit-tag-clr-txt: #{$clr-wrn-text};
}

.bit-tag-swr {
    --bit-tag-clr: #{$clr-swr};
    --bit-tag-clr-txt: #{$clr-swr-text};
}

.bit-tag-err {
    --bit-tag-clr: #{$clr-err};
    --bit-tag-clr-txt: #{$clr-err-text};
}

.bit-tag-pbg {
    --bit-tag-clr: #{$clr-bg-pri};
    --bit-tag-clr-txt: #{$clr-fg-pri};
}

.bit-tag-sbg {
    --bit-tag-clr: #{$clr-bg-sec};
    --bit-tag-clr-txt: #{$clr-fg-pri};
}

.bit-tag-tbg {
    --bit-tag-clr: #{$clr-bg-ter};
    --bit-tag-clr-txt: #{$clr-fg-pri};
}

.bit-tag-pfg {
    --bit-tag-clr: #{$clr-fg-pri};
    --bit-tag-clr-txt: #{$clr-bg-pri};
}

.bit-tag-sfg {
    --bit-tag-clr: #{$clr-fg-sec};
    --bit-tag-clr-txt: #{$clr-bg-pri};
}

.bit-tag-tfg {
    --bit-tag-clr: #{$clr-fg-ter};
    --bit-tag-clr-txt: #{$clr-bg-pri};
}

.bit-tag-pbr {
    --bit-tag-clr: #{$clr-brd-pri};
    --bit-tag-clr-txt: #{$clr-fg-pri};
}

.bit-tag-sbr {
    --bit-tag-clr: #{$clr-brd-sec};
    --bit-tag-clr-txt: #{$clr-fg-pri};
}

.bit-tag-tbr {
    --bit-tag-clr: #{$clr-brd-ter};
    --bit-tag-clr-txt: #{$clr-fg-pri};
}


.bit-tag-sm {
    --bit-tag-fontsize: #{spacing(1.5)};
    --bit-tag-padding: #{spacing(0.250)};
    --bit-tag-minheight: #{spacing(2.25)};
}

.bit-tag-md {
    --bit-tag-fontsize: #{spacing(1.75)};
    --bit-tag-padding: #{spacing(0.375)};
    --bit-tag-minheight: #{spacing(2.75)};
}

.bit-tag-lg {
    --bit-tag-fontsize: #{spacing(2.25)};
    --bit-tag-padding: #{spacing(0.500)};
    --bit-tag-minheight: #{spacing(3.5)};
}
