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

.bit-chg {
    display: flex;
    gap: spacing(1);
    font-weight: 400;
    width: fit-content;
    padding: spacing(1);
    flex-direction: column;
    font-family: $tg-font-family;
    font-size: var(--bit-chg-fontsize);
    --bit-chg-flex-direction: row;
    --bit-chg-flex-flow: column nowrap;
    --bit-chg-justify-content: flex-start;

    &.bit-chg-req {
        .bit-chg-lbl {
            &::after {
                content: " *";
                color: $clr-req;
                padding-right: spacing(1.5);
            }
        }
    }

    &.bit-inv {
        .bit-chg-rad {
            color: $clr-err;
            border-color: $clr-err;

            &::before {
                border-color: $clr-err;
            }

            &::after {
                border-color: $clr-err;
                background-color: $clr-err;
            }
        }
    }
}

.bit-chg-lbl {
    display: block;
    box-shadow: none;
    font-weight: 600;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.bit-chg-cnt {
    display: flex;
    gap: var(--bit-chg-item-gap);
    flex-flow: var(--bit-chg-flex-flow);
}

.bit-chg-hor {
    --bit-chg-flex-flow: row wrap;
}

.bit-chg-rvs {
    --bit-chg-justify-content: flex-end;
    --bit-chg-flex-direction: row-reverse;
}

.bit-chg-icn {
    border: none;
    display: flex;
    font-weight: 400;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    justify-content: var(--bit-chg-justify-content);
    min-height: calc(var(--bit-chg-circle-size) + spacing(0.75));
}

.bit-chg-ihi {
    height: 100%;
    font-size: 0;
    width: fit-content;
    display: inline-flex;
    padding-inline-start: 0;
    background-color: var(--bit-chg-clr-bg);
}

.bit-chg-rad {
    aspect-ratio: 1;
    position: relative;
    width: var(--bit-chg-circle-size);

    &::before {
        top: 50%;
        content: "";
        aspect-ratio: 1;
        position: absolute;
        border-radius: 50%;
        display: inline-block;
        inset-inline-start: 0;
        box-sizing: border-box;
        transform: translateY(-50%);
        width: var(--bit-chg-circle-size);
        transition: border-color 0.2s cubic-bezier(0.4, 0, 0.23, 1);
        border: $shp-border-width $shp-border-style $clr-brd-pri;
    }

    &::after {
        top: 50%;
        opacity: 0;
        content: "";
        aspect-ratio: 1;
        position: absolute;
        border-radius: 50%;
        box-sizing: border-box;
        transform: translateY(-50%);
        background-color: $clr-fg-sec-hover;
        transition-property: background-color;
        width: calc(var(--bit-chg-circle-size) / 2);
        transition: border-width 0.2s cubic-bezier(0.4, 0, 0.23, 1);
        inset-inline-start: calc(var(--bit-chg-circle-size) / 4);
    }

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

            &::after {
                opacity: 1;
            }
        }
    }
}

.bit-chg-itl {
    display: flex;
    cursor: pointer;
    gap: spacing(0.75);
    align-items: center;
    flex-direction: var(--bit-chg-flex-direction);
}

.bit-chg-ili {
    margin: 0;
    display: flex;
    cursor: pointer;
    user-select: none;
    text-align: center;
    position: relative;
    align-items: center;
    vertical-align: top;
    flex-direction: column;
    box-sizing: content-box;
    justify-content: center;
    min-height: spacing(2.5);
    transition: all 0.2s ease;
    padding-block-start: spacing(2.75);
    border: $shp-border-width $shp-border-style transparent;

    .bit-chg-rad {
        position: absolute;
        top: calc(var(--bit-chg-circle-size) / 4);
        right: calc(var(--bit-chg-circle-size) / 4);

        &::before {
            opacity: 0;
        }
    }

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

            .bit-chg-rad {
                &::before {
                    opacity: 1;
                }
            }
        }
    }
}

.bit-chg-ncr {
}

.bit-chg-itx {
    display: inline-block;
}

.bit-chg-itw {
    display: block;
    overflow: hidden;
    font-weight: 400;
    height: spacing(4);
    position: relative;
    max-width: spacing(8);
    white-space: pre-wrap;
    line-height: spacing(1.875);
    font-family: $tg-font-family;
    font-size: var(--bit-chg-fontsize);

    .bit-chg-itx {
        padding-inline-start: 0;
    }
}

.bit-chg-iic {
    padding: 0 spacing(3.75);
    transition: opacity 0.2s ease;

    .bit-chg-iiw {
        border-style: none;
        display: inline-block;

        img {
            opacity: 1;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
}

.bit-chg-icw {
    padding: 0 spacing(3.75);
    height: var(--bit-chg-ico-size);
    font-size: var(--bit-chg-ico-size);
    line-height: var(--bit-chg-ico-size);

    i {
        speak: none;
        display: inline-block;
    }
}

.bit-chg-inl {
    .bit-chg-ihi {
        background-color: unset;
    }

    .bit-chg-itw {
        display: flex;
        align-items: center;
    }

    .bit-chg-iic,
    .bit-chg-icw {
        padding: 0;
        font-size: calc(var(--bit-chg-fontsize) + spacing(0.25));
    }
}

.bit-chg-ich {
    .bit-chg-ili {
        .bit-chg-rad {
            &::before {
                opacity: 1;
            }
        }
    }

    .bit-chg-rad {
        border-color: var(--bit-chg-clr);

        &::before {
            border-color: var(--bit-chg-clr);
        }

        &::after {
            opacity: 1;
            background-color: var(--bit-chg-clr);
        }

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

                &::after {
                    border-color: var(--bit-chg-clr-hover);
                    background-color: var(--bit-chg-clr-hover);
                }
            }
        }
    }

    .bit-chg-ili {
        border-color: var(--bit-chg-clr);

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

    .bit-chg-itx {
        font-weight: bold;
    }
}

.bit-chg-ids {
    .bit-chg-rad {
        cursor: default;
        pointer-events: none;
        color: $clr-fg-dis;

        &::before {
            border-color: $clr-brd-dis;
        }

        &::after {
            background-color: $clr-bg-dis;
        }
    }

    .bit-chg-ili {
        cursor: default;
        border-color: transparent;
        color: $clr-fg-dis;

        @media (hover: hover) {
            &:hover {
                border-color: transparent;
            }
        }
    }

    .bit-chg-icw {
        color: $clr-fg-dis;

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

.bit-chg-pri {
    --bit-chg-clr: #{$clr-pri};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-brd-pri};
    --bit-chg-clr-hover: #{$clr-pri-hover};
}

.bit-chg-sec {
    --bit-chg-clr: #{$clr-sec};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-brd-sec};
    --bit-chg-clr-hover: #{$clr-sec-hover};
}

.bit-chg-ter {
    --bit-chg-clr: #{$clr-ter};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-brd-ter};
    --bit-chg-clr-hover: #{$clr-ter-hover};
}

.bit-chg-inf {
    --bit-chg-clr: #{$clr-inf};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-inf};
    --bit-chg-clr-hover: #{$clr-inf-hover};
}

.bit-chg-suc {
    --bit-chg-clr: #{$clr-suc};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-suc};
    --bit-chg-clr-hover: #{$clr-suc-hover};
}

.bit-chg-wrn {
    --bit-chg-clr: #{$clr-wrn};
    --bit-chg-clr-brd: #{$clr-wrn};
    --bit-chg-clr-hover: #{$clr-wrn-hover};
    --bit-chg-clr-bg: #{$clr-bg-sec};
}

.bit-chg-swr {
    --bit-chg-clr: #{$clr-swr};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-swr};
    --bit-chg-clr-hover: #{$clr-swr-hover};
}

.bit-chg-err {
    --bit-chg-clr: #{$clr-err};
    --bit-chg-clr-brd: #{$clr-err};
    --bit-chg-clr-hover: #{$clr-err-hover};
    --bit-chg-clr-bg: #{$clr-bg-sec};
}

.bit-chg-pbg {
    --bit-chg-clr: #{$clr-bg-pri};
    --bit-chg-clr-bg: #{$clr-fg-pri};
    --bit-chg-clr-brd: #{$clr-bg-pri};
    --bit-chg-clr-hover: #{$clr-bg-pri-hover};
}

.bit-chg-sbg {
    --bit-chg-clr: #{$clr-bg-sec};
    --bit-chg-clr-bg: #{$clr-fg-pri};
    --bit-chg-clr-brd: #{$clr-bg-sec};
    --bit-chg-clr-hover: #{$clr-bg-sec-hover};
}

.bit-chg-tbg {
    --bit-chg-clr: #{$clr-bg-ter};
    --bit-chg-clr-brd: #{$clr-bg-ter};
    --bit-chg-clr-hover: #{$clr-bg-ter-hover};
    --bit-chg-clr-bg: #{$clr-fg-pri};
}

.bit-chg-pfg {
    --bit-chg-clr: #{$clr-fg-pri};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-fg-pri};
    --bit-chg-clr-hover: #{$clr-fg-pri-hover};
}

.bit-chg-sfg {
    --bit-chg-clr: #{$clr-fg-sec};
    --bit-chg-clr-brd: #{$clr-fg-sec};
    --bit-chg-clr-hover: #{$clr-fg-sec-hover};
    --bit-chg-clr-bg: #{$clr-bg-sec};
}

.bit-chg-tfg {
    --bit-chg-clr: #{$clr-fg-ter};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-fg-ter};
    --bit-chg-clr-hover: #{$clr-fg-ter-hover};
}

.bit-chg-pbr {
    --bit-chg-clr: #{$clr-brd-pri};
    --bit-chg-clr-brd: #{$clr-brd-pri};
    --bit-chg-clr-hover: #{$clr-brd-pri-hover};
    --bit-chg-clr-bg: #{$clr-bg-sec};
}

.bit-chg-sbr {
    --bit-chg-clr: #{$clr-brd-sec};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-brd-sec};
    --bit-chg-clr-hover: #{$clr-brd-sec-hover};
}

.bit-chg-tbr {
    --bit-chg-clr: #{$clr-brd-ter};
    --bit-chg-clr-bg: #{$clr-bg-sec};
    --bit-chg-clr-brd: #{$clr-brd-ter};
    --bit-chg-clr-hover: #{$clr-brd-ter-hover};
}

.bit-chg-sm {
    --bit-chg-item-gap: #{spacing(1)};
    --bit-chg-ico-size: #{spacing(3)};
    --bit-chg-fontsize: #{spacing(1.5)};
    --bit-chg-circle-size: #{spacing(1.75)};
    --bit-chg-dot-position: #{spacing(0.8125)};
}

.bit-chg-md {
    --bit-chg-item-gap: #{spacing(1)};
    --bit-chg-ico-size: #{spacing(4)};
    --bit-chg-fontsize: #{spacing(1.75)};
    --bit-chg-circle-size: #{spacing(2.5)};
    --bit-chg-dot-position: #{spacing(1)};
}

.bit-chg-lg {
    --bit-chg-item-gap: #{spacing(2)};
    --bit-chg-ico-size: #{spacing(5)};
    --bit-chg-fontsize: #{spacing(2)};
    --bit-chg-circle-size: #{spacing(3.25)};
    --bit-chg-dot-position: #{spacing(1.25)};
}

.bit-chg-hor {
    &.bit-chg-sm {
        --bit-chg-item-gap: #{spacing(1)};
    }

    &.bit-chg-md {
        --bit-chg-item-gap: #{spacing(2)};
    }

    &.bit-chg-lg {
        --bit-chg-item-gap: #{spacing(3)};
    }
}