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

.bit-tfl {
    margin: 0;
    padding: 0;
    box-shadow: none;
    font-weight: 400;
    position: relative;
    box-sizing: border-box;
    font-size: spacing(1.75);
    font-family: $tg-font-family;

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

        .bit-tfl-fgp {
            border: none;
            cursor: default;
            color: $clr-fg-dis;
            background: $clr-bg-dis;
            border: $shp-border-width $shp-border-style $clr-brd-dis;
        }

        .bit-tfl-inp {
            color: $clr-fg-dis;
        }

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

        &.bit-tfl-und {
            .bit-tfl-wrp {
                width: 100%;
                display: flex;
                border-bottom: $shp-border-width $shp-border-style $clr-brd-dis;
            }

            .bit-tfl-lbl {
                height: spacing(4);
                margin: 0 spacing(1) 0 0;
                line-height: spacing(2.75);
                padding: spacing(0.625) 0 spacing(0.625) spacing(1.5);
            }

            .bit-tfl-fgp {
                flex: 1 1 0;
                border: none;
                text-align: left;
            }
        }
    }

    &.bit-inv {
        .bit-tfl-fgp,
        .bit-tfl-wrp {
            border-color: $clr-err;
        }

        &.bit-tfl-fcs {
            .bit-tfl-fgp::after {
                border-color: $clr-err;
            }

            &.bit-tfl-und {
                .bit-tfl-wrp::after {
                    border-color: $clr-err;
                }
            }
        }
    }
}

.bit-tfl-fwd {
    width: 100%;
}

.bit-tfl-lbl {
    margin: 0;
    display: block;
    box-shadow: none;
    font-weight: 600;
    box-sizing: border-box;
    font-size: spacing(1.75);
    line-height: spacing(2.5);
    padding: spacing(0.625) 0;
    overflow-wrap: break-word;
    color: $clr-fg-pri;
}

.bit-tfl-fgp {
    margin: 0;
    padding: 0;
    cursor: text;
    display: flex;
    box-shadow: none;
    position: relative;
    align-items: center;
    flex-flow: row nowrap;
    min-height: spacing(4);
    box-sizing: border-box;
    border-radius: $shp-border-radius;
    background-color: var(--bit-tfl-clr-bg);
    border: $shp-border-width $shp-border-style var(--bit-tfl-clr-brd);
}

.bit-tfl-inp {
    margin: 0;
    outline: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: none;
    font-weight: 400;
    border-radius: 0;
    box-shadow: none;
    padding: 0 spacing(1);
    box-sizing: border-box;
    text-overflow: ellipsis;
    font-size: spacing(1.75);
    min-height: spacing(3.75);
    background: none transparent;
    color: $clr-fg-pri;
    font-family: $tg-font-family;

    &[type="password"]::-ms-reveal,
    &[type="password"]::-ms-clear {
        display: none;
    }
}

.bit-tfl-rpb {
    height: 100%;
    border: none;
    cursor: pointer;
    width: spacing(4);
    position: relative;
    outline: transparent;
    padding: 0 spacing(0.5);
    min-height: spacing(3.75);
    color: var(--bit-tfl-clr);
    background-color: transparent;

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

.bit-tfl-rpc {
    display: flex;
    align-items: center;
    font-size: spacing(2);
    justify-content: center;
}

.bit-tfl-rpi {
    color: var(--bit-tfl-clr);
}

.bit-tfl-ico {
    color: $clr-fg-pri;
}

.bit-tfl-rpi,
.bit-tfl-ico {
    width: spacing(4);
    text-align: center;
    font-size: spacing(2);
}

.bit-tfl-des {
    span {
        font-size: spacing(1.25);
        color: $clr-fg-pri;
    }
}

.bit-tfl-pre,
.bit-tfl-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-tfl-mln,
.bit-tfl-mlf {
    .bit-tfl-fgp {
        height: auto;
        align-items: stretch;
    }
}

.bit-tfl-mln {
    textarea.bit-tfl-inp {
        flex-grow: 1;
        overflow: auto;
        min-height: inherit;
        line-height: spacing(2.125);
        padding: spacing(0.75) spacing(1);
    }
}

.bit-tfl-mlf {
    textarea.bit-tfl-inp {
        resize: none;
        flex-grow: 1;
        overflow: auto;
        min-height: inherit;
        line-height: spacing(2.125);
        padding: spacing(0.75) spacing(1);
    }
}

.bit-tfl-mla {
    textarea.bit-tfl-inp {
        resize: none;
        overflow: hidden;
    }
}

.bit-tfl-fcs {
    .bit-tfl-ico {
        color: var(--bit-tfl-clr);
    }

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

    .bit-tfl-fgp::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-tfl-clr);
    }

    &.bit-tfl-und {
        .bit-tfl-fgp::after {
            border: none;
        }

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

.bit-tfl-und {
    .bit-tfl-wrp {
        width: 100%;
        display: flex;
        border-bottom: $shp-border-width $shp-border-style var(--bit-tfl-clr-brd);
    }

    .bit-tfl-lbl {
        height: spacing(4);
        margin: 0 spacing(1) 0 0;
        line-height: spacing(2.75);
        padding: spacing(0.625) 0 spacing(0.625) spacing(1.5);
    }

    .bit-tfl-fgp {
        flex: 1 1 0;
        border: none;
        text-align: left;
    }
}

.bit-tfl-req {
    .bit-tfl-lbl::after {
        content: "*";
        color: $clr-req;
        margin-left: spacing(0.625);
    }
}

.bit-tfl-rnl {
    .bit-tfl-fgp::before {
        content: "*";
        position: absolute;
        top: spacing(-0.625);
        right: spacing(-1.25);
        color: $clr-req;
    }
}

.bit-tfl-nbd {
    .bit-tfl-fgp {
        border: none;
    }
}


.bit-tfl-pri {
    --bit-tfl-clr: #{$clr-pri};
}

.bit-tfl-sec {
    --bit-tfl-clr: #{$clr-sec};
}

.bit-tfl-ter {
    --bit-tfl-clr: #{$clr-ter};
}

.bit-tfl-inf {
    --bit-tfl-clr: #{$clr-inf};
}

.bit-tfl-suc {
    --bit-tfl-clr: #{$clr-suc};
}

.bit-tfl-wrn {
    --bit-tfl-clr: #{$clr-wrn};
}

.bit-tfl-swr {
    --bit-tfl-clr: #{$clr-swr};
}

.bit-tfl-err {
    --bit-tfl-clr: #{$clr-err};
}

.bit-tfl-pbg {
    --bit-tfl-clr: #{$clr-bg-pri};
}

.bit-tfl-sbg {
    --bit-tfl-clr: #{$clr-bg-sec};
}

.bit-tfl-tbg {
    --bit-tfl-clr: #{$clr-bg-ter};
}

.bit-tfl-pfg {
    --bit-tfl-clr: #{$clr-fg-pri};
}

.bit-tfl-sfg {
    --bit-tfl-clr: #{$clr-fg-sec};
}

.bit-tfl-tfg {
    --bit-tfl-clr: #{$clr-fg-ter};
}

.bit-tfl-pbr {
    --bit-tfl-clr: #{$clr-brd-pri};
}

.bit-tfl-sbr {
    --bit-tfl-clr: #{$clr-brd-sec};
}

.bit-tfl-tbr {
    --bit-tfl-clr: #{$clr-brd-ter};
}


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

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

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

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


.bit-tfl-brp {
    --bit-tfl-clr-brd: #{$clr-brd-pri};
}

.bit-tfl-brs {
    --bit-tfl-clr-brd: #{$clr-brd-sec};
}

.bit-tfl-brt {
    --bit-tfl-clr-brd: #{$clr-brd-ter};
}

.bit-tfl-brn {
    --bit-tfl-clr-brd: transparent;
}
