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

.bit-tgb {
    cursor: pointer;
    position: relative;
    text-align: center;
    align-items: center;
    display: inline-flex;
    text-decoration: none;
    box-sizing: border-box;
    justify-content: center;
    font-family: $tg-font-family;
    font-weight: $tg-font-weight;
    border-width: $shp-border-width;
    border-style: $shp-border-style;
    border-radius: $shp-border-radius;
    font-size: var(--bit-tgb-fontsize);
    --bit-tgb-icn-margin: #{spacing(0.5)};

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

.bit-tgb-ico {
    flex-shrink: 0;
    text-align: center;
    margin-inline-end: var(--bit-tgb-icn-margin);
}

.bit-tgb-btx {
    display: block;
}

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

    @media (hover: hover) {
        &:hover {
            border-color: var(--bit-tgb-clr-hover);
            background-color: var(--bit-tgb-clr-hover);
        }
    }

    &:active {
        border-color: var(--bit-tgb-clr-active);
        background-color: var(--bit-tgb-clr-active);
    }

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

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

    @media (hover: hover) {
        &:hover {
            color: var(--bit-tgb-clr-txt);
            border-color: var(--bit-tgb-clr-hover);
            background-color: var(--bit-tgb-clr-hover);
        }
    }

    &:active {
        color: var(--bit-tgb-clr-txt);
        border-color: var(--bit-tgb-clr-active);
        background-color: var(--bit-tgb-clr-active);
    }

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

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

    @media (hover: hover) {
        &:hover {
            color: var(--bit-tgb-clr-txt);
            border-color: var(--bit-tgb-clr-hover);
            background-color: var(--bit-tgb-clr-hover);
        }
    }

    &:active {
        color: var(--bit-tgb-clr-txt);
        border-color: var(--bit-tgb-clr-active);
        background-color: var(--bit-tgb-clr-active);
    }
}

.bit-tgb-chk {
    color: var(--bit-tgb-clr-txt);
    border-color: var(--bit-tgb-clr-dark);
    background-color: var(--bit-tgb-clr-dark);

    @media (hover: hover) {
        &:hover {
            border-color: var(--bit-tgb-clr-dark-hover);
            background-color: var(--bit-tgb-clr-dark-hover);
        }
    }

    &:active {
        border-color: var(--bit-tgb-clr-dark-active);
        background-color: var(--bit-tgb-clr-dark-active);
    }
}

.bit-tgb-pri {
    --bit-tgb-clr-txt: #{$clr-pri-text};
    --bit-tgb-clr: #{$clr-pri};
    --bit-tgb-clr-hover: #{$clr-pri-hover};
    --bit-tgb-clr-active: #{$clr-pri-active};
    --bit-tgb-clr-dark: #{$clr-pri-dark};
    --bit-tgb-clr-dark-hover: #{$clr-pri-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-pri-dark-active};
}

.bit-tgb-sec {
    --bit-tgb-clr-txt: #{$clr-sec-text};
    --bit-tgb-clr: #{$clr-sec};
    --bit-tgb-clr-hover: #{$clr-sec-hover};
    --bit-tgb-clr-active: #{$clr-sec-active};
    --bit-tgb-clr-dark: #{$clr-sec-dark};
    --bit-tgb-clr-dark-hover: #{$clr-sec-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-sec-dark-active};
}

.bit-tgb-ter {
    --bit-tgb-clr-txt: #{$clr-ter-text};
    --bit-tgb-clr: #{$clr-ter};
    --bit-tgb-clr-hover: #{$clr-ter-hover};
    --bit-tgb-clr-active: #{$clr-ter-active};
    --bit-tgb-clr-dark: #{$clr-ter-dark};
    --bit-tgb-clr-dark-hover: #{$clr-ter-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-ter-dark-active};
}

.bit-tgb-inf {
    --bit-tgb-clr-txt: #{$clr-inf-text};
    --bit-tgb-clr: #{$clr-inf};
    --bit-tgb-clr-hover: #{$clr-inf-hover};
    --bit-tgb-clr-active: #{$clr-inf-active};
    --bit-tgb-clr-dark: #{$clr-inf-dark};
    --bit-tgb-clr-dark-hover: #{$clr-inf-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-inf-dark-active};
}

.bit-tgb-suc {
    --bit-tgb-clr-txt: #{$clr-suc-text};
    --bit-tgb-clr: #{$clr-suc};
    --bit-tgb-clr-hover: #{$clr-suc-hover};
    --bit-tgb-clr-active: #{$clr-suc-active};
    --bit-tgb-clr-dark: #{$clr-suc-dark};
    --bit-tgb-clr-dark-hover: #{$clr-suc-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-suc-dark-active};
}

.bit-tgb-wrn {
    --bit-tgb-clr-txt: #{$clr-wrn-text};
    --bit-tgb-clr: #{$clr-wrn};
    --bit-tgb-clr-hover: #{$clr-wrn-hover};
    --bit-tgb-clr-active: #{$clr-wrn-active};
    --bit-tgb-clr-dark: #{$clr-wrn-dark};
    --bit-tgb-clr-dark-hover: #{$clr-wrn-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-wrn-dark-active};
}

.bit-tgb-swr {
    --bit-tgb-clr-txt: #{$clr-swr-text};
    --bit-tgb-clr: #{$clr-swr};
    --bit-tgb-clr-hover: #{$clr-swr-hover};
    --bit-tgb-clr-active: #{$clr-swr-active};
    --bit-tgb-clr-dark: #{$clr-swr-dark};
    --bit-tgb-clr-dark-hover: #{$clr-swr-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-swr-dark-active};
}

.bit-tgb-err {
    --bit-tgb-clr-txt: #{$clr-err-text};
    --bit-tgb-clr: #{$clr-err};
    --bit-tgb-clr-hover: #{$clr-err-hover};
    --bit-tgb-clr-active: #{$clr-err-active};
    --bit-tgb-clr-dark: #{$clr-err-dark};
    --bit-tgb-clr-dark-hover: #{$clr-err-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-err-dark-active};
}

.bit-tgb-pbg {
    --bit-tgb-clr-txt: #{$clr-fg-pri};
    --bit-tgb-clr: #{$clr-bg-pri};
    --bit-tgb-clr-hover: #{$clr-bg-pri-hover};
    --bit-tgb-clr-active: #{$clr-bg-pri-active};
    --bit-tgb-clr-dark: #{$clr-bg-pri-dark};
    --bit-tgb-clr-dark-hover: #{$clr-bg-pri-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-bg-pri-dark-active};
}

.bit-tgb-sbg {
    --bit-tgb-clr-txt: #{$clr-fg-pri};
    --bit-tgb-clr: #{$clr-bg-sec};
    --bit-tgb-clr-hover: #{$clr-bg-sec-hover};
    --bit-tgb-clr-active: #{$clr-bg-sec-active};
    --bit-tgb-clr-dark: #{$clr-bg-sec-dark};
    --bit-tgb-clr-dark-hover: #{$clr-bg-sec-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-bg-sec-dark-active};
}

.bit-tgb-tbg {
    --bit-tgb-clr-txt: #{$clr-fg-pri};
    --bit-tgb-clr: #{$clr-bg-ter};
    --bit-tgb-clr-hover: #{$clr-bg-ter-hover};
    --bit-tgb-clr-active: #{$clr-bg-ter-active};
    --bit-tgb-clr-dark: #{$clr-bg-ter-dark};
    --bit-tgb-clr-dark-hover: #{$clr-bg-ter-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-bg-ter-dark-active};
}

.bit-tgb-pfg {
    --bit-tgb-clr-txt: #{$clr-bg-pri};
    --bit-tgb-clr: #{$clr-fg-pri};
    --bit-tgb-clr-hover: #{$clr-fg-pri-hover};
    --bit-tgb-clr-active: #{$clr-fg-pri-active};
    --bit-tgb-clr-dark: #{$clr-fg-pri-dark};
    --bit-tgb-clr-dark-hover: #{$clr-fg-pri-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-fg-pri-dark-active};
}

.bit-tgb-sfg {
    --bit-tgb-clr-txt: #{$clr-bg-pri};
    --bit-tgb-clr: #{$clr-fg-sec};
    --bit-tgb-clr-hover: #{$clr-fg-sec-hover};
    --bit-tgb-clr-active: #{$clr-fg-sec-active};
    --bit-tgb-clr-dark: #{$clr-fg-sec-dark};
    --bit-tgb-clr-dark-hover: #{$clr-fg-sec-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-fg-sec-dark-active};
}

.bit-tgb-tfg {
    --bit-tgb-clr-txt: #{$clr-bg-pri};
    --bit-tgb-clr: #{$clr-fg-ter};
    --bit-tgb-clr-hover: #{$clr-fg-ter-hover};
    --bit-tgb-clr-active: #{$clr-fg-ter-active};
    --bit-tgb-clr-dark: #{$clr-fg-ter-dark};
    --bit-tgb-clr-dark-hover: #{$clr-fg-ter-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-fg-ter-dark-active};
}

.bit-tgb-pbr {
    --bit-tgb-clr-txt: #{$clr-fg-pri};
    --bit-tgb-clr: #{$clr-brd-pri};
    --bit-tgb-clr-hover: #{$clr-brd-pri-hover};
    --bit-tgb-clr-active: #{$clr-brd-pri-active};
    --bit-tgb-clr-dark: #{$clr-brd-pri-dark};
    --bit-tgb-clr-dark-hover: #{$clr-brd-pri-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-brd-pri-dark-active};
}

.bit-tgb-sbr {
    --bit-tgb-clr-txt: #{$clr-fg-pri};
    --bit-tgb-clr: #{$clr-brd-sec};
    --bit-tgb-clr-hover: #{$clr-brd-sec-hover};
    --bit-tgb-clr-active: #{$clr-brd-sec-active};
    --bit-tgb-clr-dark: #{$clr-brd-sec-dark};
    --bit-tgb-clr-dark-hover: #{$clr-brd-sec-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-brd-sec-dark-active};
}

.bit-tgb-tbr {
    --bit-tgb-clr-txt: #{$clr-fg-pri};
    --bit-tgb-clr: #{$clr-brd-ter};
    --bit-tgb-clr-hover: #{$clr-brd-ter-hover};
    --bit-tgb-clr-active: #{$clr-brd-ter-active};
    --bit-tgb-clr-dark: #{$clr-brd-ter-dark};
    --bit-tgb-clr-dark-hover: #{$clr-brd-ter-dark-hover};
    --bit-tgb-clr-dark-active: #{$clr-brd-ter-dark-active};
}


.bit-tgb-sm {
    padding: spacing(0.5) spacing(1.5);
    --bit-tgb-fontsize: #{spacing(1.5)};
    --bit-tgb-ntx-pad: #{spacing(0.5)};
    --bit-tgb-ntx-icn-size: #{spacing(2.00)};
}

.bit-tgb-md {
    padding: spacing(0.75) spacing(2);
    --bit-tgb-fontsize: #{spacing(1.75)};
    --bit-tgb-ntx-pad: #{spacing(0.75)};
    --bit-tgb-ntx-icn-size: #{spacing(2.35)};
}

.bit-tgb-lg {
    padding: spacing(1) spacing(2.5);
    --bit-tgb-fontsize: #{spacing(2)};
    --bit-tgb-ntx-pad: #{spacing(1.0)};
    --bit-tgb-ntx-icn-size: #{spacing(3.35)};
}



// important: these need to be here at the end!

.bit-tgb-fxc {
    color: var(--bit-tgb-clr-txt);
}

.bit-tgb-ntx {
    padding: var(--bit-tgb-ntx-pad);
    --bit-tgb-icn-margin: 0;
    --bit-tgb-fontsize: var(--bit-tgb-ntx-icn-size);
}
