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

.bit-nfl {
    display: flex;
    font-weight: 400;
    align-items: center;
    font-size: spacing(5.125);
    font-family: $tg-font-family;
    column-gap: spacing(1.25);

    &.bit-dis {
        .bit-nfl-lct {
            color: $clr-fg-dis;
        }

        .bit-nfl-lbl {
            color: $clr-fg-dis;
        }

        .bit-nfl-cnt {
            border: none;
            cursor: default;
            background: none;
            color: $clr-fg-dis;
        }

        .bit-nfl-inp {
            border: none;
            cursor: default;
            color: $clr-fg-dis;
            background: $clr-bg-dis;
        }

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

        .bit-nfl-aup,
        .bit-nfl-adn,
        .bit-nfl-cbt {
            cursor: default;
            pointer-events: none;
            color: $clr-fg-dis;
            background: $clr-bg-dis;
            border: $shp-border-width $shp-border-style $clr-brd-dis;
        }
    }

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

        &.bit-nfl-fcs {
            .bit-nfl-cnt::after {
                border-color: $clr-err;
            }
        }
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
        -webkit-appearance: none;
    }
}

.bit-nfl-ltp {
    flex-direction: column;
    align-items: flex-start;
}

.bit-nfl-lbt {
    align-items: flex-start;
    flex-direction: column-reverse;
}

.bit-nfl-lst {
    flex-direction: row;
}

.bit-nfl-led {
    flex-direction: row-reverse;
}

.bit-nfl-lct {
    height: spacing(4);
    align-items: center;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

.bit-nfl-lic {
    font-size: spacing(2.5);
    padding: 0 spacing(0.625);
}

.bit-nfl-lbl {
    box-shadow: none;
    font-weight: 600;
    white-space: nowrap;
    box-sizing: border-box;
    font-size: spacing(1.75);
    padding: spacing(0.625) 0;
    line-height: spacing(2.5);
    color: $clr-fg-pri;
}

.bit-nfl-cnt {
    width: 100%;
    display: flex;
    height: spacing(4);
    position: relative;
    box-sizing: border-box;
    border-radius: $shp-border-radius;
    background-color: $clr-bg-pri;
    border: $shp-border-width $shp-border-style $clr-brd-pri;
}

.bit-nfl-hdi {
    width: max-content;
}

.bit-nfl-inp {
    margin: 0;
    outline: 0;
    width: 100%;
    flex: 1 1 0%;
    height: 100%;
    cursor: text;
    display: block;
    overflow: hidden;
    box-shadow: none;
    user-select: text;
    border-style: none;
    white-space: nowrap;
    font-family: inherit;
    box-sizing: border-box;
    text-overflow: ellipsis;
    font-size: spacing(1.75);
    background: none transparent;
    color: $clr-fg-pri;
    padding: 0 spacing(1) 0 spacing(1.125);
    border-radius: $shp-border-radius 0 0 $shp-border-radius;
}

.bit-nfl-cbt {
    height: auto;
    border: none;
    cursor: pointer;
    font-weight: 400;
    width: spacing(4);
    user-select: none;
    color: $clr-fg-sec;
    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);
    font-family: $tg-font-family;
    background-color: transparent;
    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);
    }

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

.bit-nfl-cin {
    text-align: center;
}

.bit-nfl-act {
    display: flex;
    flex-direction: column;
}

.bit-nfl-aup,
.bit-nfl-adn,
.bit-nfl-sbn {
    padding: 0;
    border: none;
    outline: none;
    display: block;
    cursor: default;
    user-select: none;
    position: relative;
    text-align: center;
    width: spacing(2.875);
    text-decoration: none;
    box-sizing: border-box;
    background-color: transparent;
    color: $clr-fg-pri;
    border-radius: $shp-border-radius;

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

.bit-nfl-aup {
    height: 50%;
    border-radius: 0 $shp-border-radius 0 0;
}

.bit-nfl-adn {
    height: 50%;
    border-radius: 0 0 $shp-border-radius 0;
}

.bit-nfl-sbn {
    width: spacing(4);
}

.bit-nfl-aic {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.bit-nfl-bic {
    margin: 0;
    width: 100%;
    flex-shrink: 0;
    height: spacing(2);
    font-size: spacing(1);
    line-height: spacing(2);
}

.bit-nfl-sbi {
    font-size: spacing(1.5);
}

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

.bit-nfl-pre,
.bit-nfl-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-nfl-req {
    .bit-nfl-lbl::after {
        content: "*";
        color: $clr-req;
        margin-inline-start: spacing(0.625);
    }
}

.bit-nfl-rnl {
    .bit-nfl-cnt::before {
        content: "*";
        position: absolute;
        top: spacing(-0.625);
        font-size: spacing(1.75);
        color: $clr-req;
        inset-inline-end: spacing(-1.25);
    }
}
