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

.bit-mnb {
    display: flex;
    overflow: hidden;
    width: fit-content;
    position: relative;
    outline: transparent;
    box-sizing: border-box;
    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;
    --bit-mnb-cal-opa: 0;
    --bit-mnb-cal-tra: translateY(#{spacing(-1.25)});

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

.bit-mnb-opb,
.bit-mnb-chb {
    display: flex;
    color: inherit;
    gap: spacing(1);
    cursor: pointer;
    font-size: inherit;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
    justify-content: center;
    background-color: inherit;
    padding: var(--bit-mnb-padding);

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

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

.bit-mnb-opb {
    flex-grow: 1;
    color: var(--bit-mnb-clr-opb-txt);
    background-color: var(--bit-mnb-clr-opb-bg);
}

.bit-mnb-chb {
    width: spacing(4);
    font-size: spacing(1.5);
    color: var(--bit-mnb-clr-chb-txt);
    background-color: var(--bit-mnb-clr-chb-bg);
}

.bit-mnb-spb {
    margin: auto 0;
    height: spacing(2);
    width: spacing(0.125);
    background-color: var(--bit-mnb-clr-spb);
}

.bit-mnb-omn {
    --bit-mnb-cal-opa: 1;
    --bit-mnb-cal-tra: translateY(0);
    --bit-mnb-clr-opb-txt: var(--bit-mnb-clr-opb-txt-nsp);
    --bit-mnb-clr-opb-bg: var(--bit-mnb-clr-opb-bg-nsp);
    --bit-mnb-clr-chb-txt: var(--bit-mnb-clr-txt);
    --bit-mnb-clr-chb-bg: var(--bit-mnb-clr-active);
}

.bit-mnb-nsp {
    --bit-mnb-clr-opb-txt-nsp: var(--bit-mnb-clr-txt);
    --bit-mnb-clr-opb-bg-nsp: var(--bit-mnb-clr-active);
}

.bit-mnb-btx {
    flex-grow: 1;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    text-overflow: ellipsis;
}

.bit-mnb-ovl {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    z-index: $zindex-overlay;
    background-color: transparent;
}

.bit-mnb-cal {
    display: none;
    position: fixed;
    overflow: hidden auto;
    min-width: max-content;
    box-sizing: border-box;
    z-index: $zindex-callout;
    background-color: $clr-bg-pri;
    opacity: var(--bit-mnb-cal-opa);
    box-shadow: $box-shadow-callout;
    transform: var(--bit-mnb-cal-tra);
    transition: opacity 100ms, transform 300ms;
    border-radius: 0 0 spacing(0.25) spacing(0.25);
}

.bit-mnb-cul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
}

.bit-mnb-itm {
    width: 100%;
    border: none;
    display: flex;
    gap: spacing(1);
    cursor: pointer;
    text-align: start;
    color: $clr-fg-pri;
    font-size: inherit;
    padding: spacing(1);
    align-items: center;
    line-height: inherit;
    background-color: transparent;

    &[disabled] {
        cursor: default;
        color: $clr-fg-dis;
        pointer-events: none;
    }

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

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

.bit-mnb-iic {
    color: inherit;
}

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

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

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

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

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

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

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

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

.bit-mnb-txt {
    color: var(--bit-mnb-clr);
    border-color: transparent;
    background-color: transparent;
    --bit-mnb-clr-spb: var(--bit-mnb-clr);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


.bit-mnb-sm {
    font-size: spacing(1.5);
    --bit-mnb-padding: #{spacing(0.5)} #{spacing(1.0)};
}

.bit-mnb-md {
    font-size: spacing(1.75);
    --bit-mnb-padding: #{spacing(0.75)} #{spacing(1.5)};
}

.bit-mnb-lg {
    font-size: spacing(2.0);
    --bit-mnb-padding: #{spacing(1.0)} #{spacing(2.0)};
}
