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

.bit-otp {
    display: flex;
    width: fit-content;
    box-sizing: border-box;
    flex-direction: column;
    font-family: $tg-font-family;
    font-size: var(--bit-otp-fontsize);

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

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

    &.bit-inv {
        .bit-otp-inp {
            outline: none;
            border-color: $clr-err;
        }
    }
}

.bit-otp-lbl {
    margin: 0;
    display: block;
    font-weight: 600;
    color: $clr-fg-pri;
    font-size: inherit;
    box-sizing: border-box;
    padding: spacing(0.625) 0;
    overflow-wrap: break-word;
}

.bit-otp-iwr {
    display: flex;
    gap: spacing(1.25);
    box-sizing: border-box;
    flex-direction: var(--bit-otp-iwr-flexdirection);
}

.bit-otp-inp {
    display: flex;
    cursor: pointer;
    font-size: inherit;
    text-align: center;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    -moz-appearance: textfield;
    width: var(--bit-otp-size);
    height: var(--bit-otp-size);
    background-color: $clr-bg-pri;
    border-radius: $shp-border-radius;
    border: $shp-border-width $shp-border-style $clr-brd-pri;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
        -webkit-appearance: none
    }

    &:focus {
        outline: none;
        border: spacing(0.25) $shp-border-style $clr-pri;
    }
}

.bit-otp-vrt {
    --bit-otp-iwr-flexdirection: column;
}

.bit-otp-rvs {
    --bit-otp-iwr-flexdirection: row-reverse;
}

.bit-otp-vrt.bit-otp-rvs {
    --bit-otp-iwr-flexdirection: column-reverse;
}


.bit-otp-sm {
    --bit-otp-size: #{spacing(3.0)};
    --bit-otp-fontsize: #{spacing(1.5)};
}

.bit-otp-md {
    --bit-otp-size: #{spacing(3.75)};
    --bit-otp-fontsize: #{spacing(1.75)};
}

.bit-otp-lg {
    --bit-otp-size: #{spacing(4.5)};
    --bit-otp-fontsize: #{spacing(2.0)};
}
