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

.bit-brc {
    white-space: nowrap;
    --bit-brc-div-transform: scaleX(1);

    &.bit-rtl {
        --bit-brc-div-transform: scaleX(-1);
    }

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

        .bit-brc-obt,
        .bit-brc-itm,
        .bit-brc-sel,
        i {
            cursor: default;
            font-weight: 400;
            color: $clr-fg-dis;
            pointer-events: none;
        }
    }
}

.bit-brc-icn {
    padding-inline-start: 0;

    li {
        align-items: center;
        display: inline-flex;
    }

    a {
        text-decoration: none;
        border-radius: $shp-border-radius;
    }

    button {
        background-color: transparent;
        border-radius: $shp-border-radius;
    }
}

.bit-brc-div {
    color: $clr-fg-sec;
}

.bit-brc-trd {
    transform: var(--bit-brc-div-transform);
}

.bit-brc-obt {
    display: flex;
    cursor: pointer;
    color: $clr-fg-sec;
    align-items: center;
    justify-content: center;
    line-height: spacing(4.5);
    padding: 0px spacing(1.25);

    @media (hover: hover) {
        &:hover {
            background-color: $clr-bg-pri-hover;
        }
    }
}

.bit-brc-itm,
.bit-brc-nii {
    display: flex;
    gap: spacing(1);
    font-weight: 400;
    color: $clr-fg-pri;
    padding: 0 spacing(1);
    font-size: spacing(2.5);
    line-height: spacing(4.5);
}

.bit-brc-itm {
    cursor: pointer;

    @media (hover: hover) {
        &:hover {
            background-color: $clr-bg-pri-hover;
        }
    }
}

.bit-brc-rvi {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.bit-brc-cal {
    display: none;
    position: fixed;
    font-weight: 400;
    overflow: hidden auto;
    box-sizing: border-box;
    z-index: $zindex-callout;
    font-size: spacing(1.75);
    animation-fill-mode: both;
    animation-duration: 0.367s;
    background-color: $clr-bg-pri;
    box-shadow: $box-shadow-callout;
    border-radius: $shp-border-radius;
    animation-name: bit-fade-show, bit-slide-down;
    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);

    ul {
        margin: 0;
        padding-inline-start: 0;
    }
}

.bit-brc-scn {
    overflow: hidden auto;
    max-height: spacing(88.875);
}

.bit-brc-ofi,
.bit-brc-ofn {
    width: 100%;
    display: flex;
    gap: spacing(1);
    overflow: hidden;
    text-align: left;
    font-weight: 400;
    user-select: none;
    color: $clr-fg-pri;
    position: relative;
    align-items: center;
    white-space: nowrap;
    height: spacing(4.5);
    outline: transparent;
    padding: 0 spacing(1);
    text-decoration: none;
    box-sizing: border-box;
    text-overflow: ellipsis;
    font-size: spacing(1.75);
    min-width: spacing(22.5);
    line-height: spacing(2.5);
    background-color: transparent;
    border: $shp-border-width $shp-border-style transparent;
}

.bit-brc-ofi {
    cursor: pointer;

    @media (hover: hover) {
        &:hover {
            background-color: $clr-bg-pri-hover;
        }
    }
}

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

.bit-brc-dis {
    color: $clr-fg-dis;
    pointer-events: none;
}

.bit-brc-sel {
    font-weight: 600;
}
