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

.bit-srb {
    display: flex;
    font-weight: 400;
    align-items: stretch;
    flex-flow: row nowrap;
    font-family: $tg-font-family;

    &.bit-dis {
        cursor: default;
        pointer-events: none;

        .bit-srb-cnt {
            color: $clr-fg-dis;
            border-color: $clr-brd-dis;
            background-color: $clr-bg-dis;
        }

        .bit-srb-iwp {
            i {
                color: $clr-fg-dis;
            }
        }

        .bit-srb-pre,
        .bit-srb-suf {
            color: $clr-fg-dis;
        }

        @media (hover: hover) {
            &:hover {
                .bit-srb-cnt {
                    border-color: $clr-brd-dis;
                }

                .bit-srb-iwp {
                    i {
                        color: $clr-fg-dis;
                    }
                }
            }
        }

        .bit-srb-sbn {
            border-color: $clr-brd-dis;
            background-color: $clr-bg-dis;

            i {
                color: $clr-fg-dis;
            }
        }

        &.bit-srb-und {
            .bit-srb-cnt {
                background-color: transparent;
            }

            .bit-srb-sbn {
                background-color: transparent;
            }
        }
    }

    &.bit-inv {
        .bit-srb-cnt {
            border-color: $clr-err;
        }

        .bit-srb-iwp i {
            color: $clr-err;
        }

        @media (hover: hover) {
            &:hover {
                .bit-srb-cnt {
                    border-color: $clr-err;
                }

                .bit-srb-iwp i {
                    color: $clr-err;
                }
            }
        }

        &.bit-srb-foc {
            .bit-srb-cnt::after {
                border-color: $clr-err;
            }

            &.bit-srb-und {
                .bit-srb-cnt::after {
                    border-color: $clr-err;
                }
            }
        }
    }

    &.bit-rtl {
        .bit-srb-sbn i {
            transform: scale(-1);
        }
    }

    @media (hover: hover) {
        &:hover {
            .bit-srb-cnt,
            &.bit-srb-und .bit-srb-sbn {
                border-color: $clr-brd-pri-hover;
            }

            &.bit-srb-foc {
                .bit-srb-sbn {
                    border-color: var(--bit-srb-clr);
                }
            }

            .bit-srb-iwp {
                i {
                    color: var(--bit-srb-clr-hover);
                }
            }
        }
    }
}

.bit-srb-cnt {
    flex: 1;
    margin: 0;
    display: flex;
    max-width: 100%;
    box-shadow: none;
    color: $clr-fg-pri;
    height: spacing(4);
    position: relative;
    align-items: stretch;
    flex-flow: row nowrap;
    box-sizing: border-box;
    font-size: spacing(1.75);
    border-radius: $shp-border-radius;
    background-color: var(--bit-srb-clr-bg);
    border: $shp-border-width $shp-border-style $clr-brd-pri;
}

.bit-srb-iwp {
    cursor: text;
    display: flex;
    flex-shrink: 0;
    width: spacing(4);
    text-align: center;
    font-size: spacing(2);
    flex-direction: column;
    justify-content: center;
    color: var(--bit-srb-clr);
    transition: width 0.167s ease 0s;

    i {
        opacity: 1;
        speak: none;
        width: unset;
        height: unset;
        display: inline-block;
        color: var(--bit-srb-clr);
        transition: opacity 0.167s ease 0s;
    }
}

.bit-srb-inp {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    border: none;
    outline: none;
    overflow: hidden;
    box-shadow: none;
    color: $clr-fg-pri;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    padding: 0 spacing(1);
    box-sizing: border-box;
    text-overflow: ellipsis;
    background-color: transparent;
}

.bit-srb-pre,
.bit-srb-suf {
    height: 100%;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    white-space: nowrap;
    padding: 0 spacing(1.25);
    min-height: spacing(3.75);
    color: $clr-fg-pri;
    background: $clr-bg-sec;

    span {
        font-size: spacing(1.75);
        padding-bottom: spacing(0.125);
    }
}

.bit-srb-cbt {
    height: auto;
    border: none;
    cursor: pointer;
    font-weight: 400;
    width: spacing(4);
    user-select: none;
    position: relative;
    text-align: center;
    outline: transparent;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 spacing(0.5);
    font-size: spacing(1.75);
    background-color: transparent;
    font-family: $tg-font-family;
    border-radius: 0 spacing(0.125) spacing(0.125) 0;

    i {
        width: unset;
        flex-shrink: 0;
        height: spacing(2);
        text-align: center;
        margin: 0 spacing(0.5);
        font-size: spacing(1.5);
        line-height: spacing(2);
        color: $clr-fg-sec;
    }

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

            i {
                color: $clr-fg-pri-hover;
            }
        }
    }
}

.bit-srb-sbn {
    height: auto;
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    font-weight: 400;
    width: spacing(4);
    user-select: none;
    position: relative;
    text-align: center;
    align-items: center;
    outline: transparent;
    font-size: spacing(2);
    text-decoration: none;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    padding: 0 spacing(0.5);
    font-family: $tg-font-family;
    background-color: var(--bit-srb-clr);
    border-end-end-radius: $shp-border-radius;
    border-start-end-radius: $shp-border-radius;
    border: $shp-border-width $shp-border-style var(--bit-srb-clr);
    border-inline-start: none;

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

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

    i {
        width: unset;
        flex-shrink: 0;
        height: spacing(2);
        text-align: center;
        margin: 0 spacing(0.5);
        font-size: spacing(2);
        line-height: spacing(2);
        color: var(--bit-srb-clr-txt);
    }
}

.bit-srb-und {
    .bit-srb-cnt {
        border-radius: 0;
        border-width: 0 0 spacing(0.125);

        @media (hover: hover) {
            &:hover {
                border-top-width: 0;
                border-inline-end-width: 0;
                border-inline-start-width: 0;
            }
        }
    }

    .bit-srb-sbn {
        border-top-width: 0;
        border-inline-end-width: 0;
        border-inline-start-width: 0;
        border-color: $clr-brd-pri;
        background-color: transparent;

        i {
            color: var(--bit-srb-clr);
        }

        @media (hover: hover) {
            &:hover {
                background-color: var(--bit-srb-clr-hover);

                i {
                    color: var(--bit-srb-clr-txt);
                }
            }
        }
    }
}

.bit-srb-foc {
    .bit-srb-iwp {
        width: 0;

        i {
            opacity: 0;
        }
    }

    .bit-srb-pre,
    .bit-srb-suf {
        color: var(--bit-srb-clr);
    }

    .bit-srb-sbn {
        border-color: var(--bit-srb-clr);
    }

    .bit-srb-cnt::after {
        content: "";
        position: absolute;
        pointer-events: none;
        inset: spacing(-0.125);
        border-radius: $shp-border-radius;
        border: spacing(0.25) $shp-border-style var(--bit-srb-clr);
    }

    &.bit-srb-und {
        .bit-srb-cnt::after,
        .bit-srb-sbn::after {
            content: "";
            border: none;
            position: absolute;
            pointer-events: none;
            inset: spacing(-0.125);
            border-bottom: spacing(0.25) $shp-border-style var(--bit-srb-clr);
        }
    }
}

.bit-srb-nbr {
    .bit-srb-cnt,
    .bit-srb-cnt::after {
        border: none;
    }

    .bit-srb-sbn {
        border: none;
        background-color: transparent;

        i {
            color: var(--bit-srb-clr);
        }

        @media (hover: hover) {
            &:hover {
                background-color: var(--bit-srb-clr-hover);

                i {
                    color: var(--bit-srb-clr-txt);
                }
            }
        }
    }
}

.bit-srb-hvl {
    @media (hover: hover) {
        &:hover {
            .bit-srb-iwp {
                width: 0;

                i {
                    opacity: 0;
                }
            }
        }
    }
}

.bit-srb-fic {
    &.bit-srb-foc {
        .bit-srb-iwp {
            width: spacing(4);

            i {
                opacity: 1;
            }
        }
    }

    &.bit-srb-hvl {
        @media (hover: hover) {
            &:hover {
                .bit-srb-iwp {
                    width: spacing(4);

                    i {
                        opacity: 1;
                        color: var(--bit-srb-clr-hover);
                    }
                }
            }
        }
    }
}

.bit-srb-nan {
    .bit-srb-iwp {
        transition: none;

        i {
            transition: none;
        }
    }
}

.bit-srb-hic {
    .bit-srb-cnt {
        //padding: 0 spacing(1);
    }
}

.bit-srb-ssb {
    .bit-srb-cnt {
        border-end-end-radius: 0;
        border-start-end-radius: 0;
    }
}

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

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

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

.bit-srb-itm {
    width: 100%;
    display: flex;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    font-weight: 400;
    user-select: none;
    position: relative;
    white-space: nowrap;
    align-items: center;
    height: spacing(4.5);
    outline: transparent;
    padding: 0 spacing(1);
    text-decoration: none;
    box-sizing: border-box;
    text-overflow: ellipsis;
    font-size: spacing(1.875);
    line-height: spacing(2.5);
    background-color: transparent;
    color: $clr-fg-pri;
    border: $shp-border-width $shp-border-style transparent;

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

.bit-srb-sel {
    background-color: $clr-bg-sec;

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


.bit-srb-bpr {
    --bit-srb-clr-bg: #{$clr-bg-pri};
}

.bit-srb-bse {
    --bit-srb-clr-bg: #{$clr-bg-sec};
}

.bit-srb-btr {
    --bit-srb-clr-bg: #{$clr-bg-ter};
}

.bit-srb-btn {
    --bit-srb-clr-bg: transparent;
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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