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

.bit-tgl {
    display: flex;
    gap: spacing(1);
    width: fit-content;
    font-size: inherit;
    font-weight: inherit;
    flex-direction: column;
    font-family: $tg-font-family;

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

        .bit-tgl-btn {
            cursor: default;
            background: $clr-bg-dis;
            border: $shp-border-width $shp-border-style $clr-brd-dis;

            @media (hover: hover) {
                &:hover {
                    .bit-tgl-sta {
                        background-color: $clr-fg-dis;
                    }
                }
            }
        }

        .bit-tgl-sta {
            background-color: $clr-fg-dis;
        }

        &.bit-tgl-chk {
            .bit-tgl-btn {
                background: $clr-bg-dis;
                justify-content: flex-end;
                border: $shp-border-width $shp-border-style transparent;
            }

            .bit-tgl-sta {
                background-color: $clr-bg-dis;
            }
        }
    }

    &.bit-inv {
        .bit-tgl-btn {
            border-color: $clr-err;
        }

        .bit-tgl-stx {
            color: $clr-err;
        }

        &.bit-tgl-chk {
            .bit-tgl-btn {
                background-color: $clr-err;

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

            .bit-tgl-stx {
                color: $clr-err;
            }
        }
    }
}

.bit-tgl-inl {
    align-items: center;
    flex-direction: row;
}

.bit-tgl-fwi {
    width: 100%;

    &.bit-tgl-inl {
        gap: 0;
    }

    label {
        flex-grow: 1;
    }
}

.bit-tgl-lbl {
    cursor: pointer;
    font-weight: 600;
    color: $clr-fg-pri;
    font-size: spacing(1.75);
}

.bit-tgl-cnt {
    display: flex;
    gap: spacing(1);
    position: relative;
    align-items: center;
}

.bit-tgl-btn {
    display: flex;
    cursor: pointer;
    width: spacing(5);
    position: relative;
    align-items: center;
    outline: transparent;
    height: spacing(2.5);
    min-width: spacing(5);
    box-sizing: border-box;
    font-size: spacing(2.5);
    background: $clr-bg-pri;
    padding: 0 spacing(0.375);
    transition: all 0.1s ease 0s;
    border-radius: spacing(1.25);
    border: $shp-border-width $shp-border-style $clr-brd-pri;

    @media (hover: hover) {
        &:hover {
            border-color: $clr-brd-pri-hover;

            .bit-tgl-sta {
                background-color: $clr-fg-sec-hover;
            }
        }
    }
}

.bit-tgl-sta {
    display: block;
    border-radius: 50%;
    width: spacing(1.5);
    height: spacing(1.5);
    box-sizing: border-box;
    transition: all 0.1s ease 0s;
    background-color: $clr-fg-sec;
    border: spacing(0.75) $shp-border-style transparent;
}

.bit-tgl-stx {
    padding: 0;
    cursor: pointer;
    font-weight: 400;
    user-select: none;
}

.bit-tgl-chk {
    .bit-tgl-btn {
        cursor: pointer;
        justify-content: flex-end;
        background: $clr-pri;
        border: $shp-border-width $shp-border-style transparent;

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

                .bit-tgl-sta {
                    background-color: $clr-pri-text;
                }
            }
        }
    }

    .bit-tgl-sta {
        background-color: $clr-pri-text;
    }
}

.bit-tgl-rvs {
    display: flex;
    flex-direction: column-reverse;

    &.bit-tgl-inl {
        flex-direction: row-reverse;
    }

    .bit-tgl-lbl {
        text-align: end;
    }
}
