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

.bit-prs {
    display: flex;
    font-weight: 400;
    box-shadow: none;
    color: $clr-fg-pri;
    width: fit-content;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    font-size: spacing(1.75);
    font-family: $tg-font-family;
    --bit-prs-flex-direction: row;
    flex-direction: var(--bit-prs-flex-direction);

    &.bit-dis {
        color: $clr-fg-dis;
        pointer-events: none;
        background-color: $clr-bg-dis;
    }
}

.bit-prs-fwi {
    width: 100%;
}

.bit-prs-cin {
    font-weight: 400;
    position: relative;
    font-size: spacing(1.75);
}

.bit-prs-imc {
    display: flex;
    overflow: hidden;
    font-weight: 600;
    position: relative;
    align-items: center;
    justify-content: center;
    border-width: $shp-border-width;
    border-style: $shp-border-style;
}

.bit-prs-rvs {
    --bit-prs-flex-direction: row-reverse;
}

.bit-prs-him {
    .bit-prs-imc {
        border: none;
        border-width: 0;
    }
}

.bit-prs-crl {
    .bit-prs-imc {
        border-radius: 50%;
    }
}

.bit-prs-sqr {
    .bit-prs-imc {
        border-radius: $shp-border-radius;
    }
}

.bit-prs-imo {
    width: 100%;
    height: 100%;
    display: none;
    font-weight: 400;
    position: absolute;
    align-items: center;
    justify-content: center;
    font-size: spacing(1.75);
    transition: all 0.1s linear;
    color: var(--bit-prs-coin-clr-txt);
    background-color: var(--bit-prs-coin-clr-bg);
}

.bit-prs-ini {
    text-transform: uppercase;
}

.bit-prs-img {
    opacity: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.bit-prs-pre {
    top: auto;
    display: flex;
    width: spacing(1);
    height: spacing(1);
    position: absolute;
    border-radius: 50%;
    align-items: center;
    right: spacing(-0.25);
    bottom: spacing(-0.25);
    font-size: spacing(0.5);
    box-sizing: content-box;
    justify-content: center;
    forced-color-adjust: none;
    background-clip: border-box;
    border: spacing(0.125) $shp-border-style $clr-brd-sec;
}

.bit-prs-rvs {
    .bit-prs-pre {
        right: unset;
        left: spacing(-0.25);
    }
}

.bit-prs-det {
    display: flex;
    overflow: hidden;
    text-align: start;
    flex-direction: column;
    justify-content: space-around;
}

.bit-prs-ptx,
.bit-prs-stx,
.bit-prs-ttx,
.bit-prs-otx {
    overflow: hidden;
    color: $clr-fg-pri;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bit-prs-abt {
    left: 50%;
    bottom: 0;
    border: none;
    display: flex;
    cursor: pointer;
    font-weight: 400;
    width: spacing(4);
    background: unset;
    color: transparent;
    height: spacing(4);
    position: absolute;
    text-align: center;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
    padding: 0 spacing(0.5);
    justify-content: center;
    font-size: spacing(1.75);
    transform: translateX(-50%);
    font-family: $tg-font-family;
    background-color: transparent;

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

.bit-prs-aic {
    margin: 0 spacing(0.5);
}

.bit-prs-iac {
    .bit-prs-imc {
        cursor: pointer;

        @media (hover: hover) {
            &:hover {
                .bit-prs-imo {
                    display: flex;
                }
            }
        }
    }
}

.bit-prs-off {
    background-color: $clr-ntr-white;
    border: spacing(0.25) $shp-border-style $clr-ntr-gray110;
}

.bit-prs-onl {
    background-color: $clr-suc;
}

.bit-prs-awy {
    background-color: $clr-wrn;
}

.bit-prs-dnd {
    background-color: $clr-err;
}

.bit-prs-blk {
    background-color: $clr-ntr-white;
    border: spacing(0.25) $shp-border-style $clr-err;
}

.bit-prs-bsy {
    background-color: $clr-err;
}

.bit-prs-s8 {
    .bit-prs-pre {
        position: static;
    }

    .bit-prs-pic {
        font-size: spacing(1.25);
    }

    .bit-prs-det {
        padding: 0 spacing(1);
    }

    .bit-prs-ptx {
        font-size: spacing(1.5);
    }

    .bit-prs-stx,
    .bit-prs-ttx,
    .bit-prs-otx {
        display: none;
    }
}

.bit-prs-s24 {
    .bit-prs-ima {
        flex: 0 0 auto;
        width: spacing(3);
        height: spacing(3);
        position: relative;
        text-align: center;
    }

    .bit-prs-imc {
        aspect-ratio: 1;
        width: spacing(3);
        font-size: spacing(1.75);
    }

    .bit-prs-det {
        padding: 0 spacing(1);
    }

    .bit-prs-stx,
    .bit-prs-ttx,
    .bit-prs-otx {
        display: none;
    }
}

.bit-prs-s32 {
    .bit-prs-ima {
        flex: 0 0 auto;
        width: spacing(4);
        height: spacing(4);
        position: relative;
        text-align: center;
    }

    .bit-prs-imc {
        aspect-ratio: 1;
        width: spacing(4);
        font-size: spacing(1.75);
    }

    .bit-prs-det {
        padding: 0 spacing(1);
    }

    .bit-prs-stx,
    .bit-prs-ttx,
    .bit-prs-otx {
        display: none;
    }
}

.bit-prs-s40 {
    .bit-prs-ima {
        flex: 0 0 auto;
        width: spacing(5);
        height: spacing(5);
        position: relative;
        text-align: center;
    }

    .bit-prs-imc {
        aspect-ratio: 1;
        width: spacing(5);
        font-size: spacing(2);
    }

    .bit-prs-pre {
        width: spacing(1.5);
        height: spacing(1.5);
        font-size: spacing(0.85);
    }

    .bit-prs-det {
        padding: 0 spacing(1.5);
    }

    .bit-prs-ptx {
        font-weight: 400;
        font-size: spacing(1.75);
    }

    .bit-prs-stx {
        font-weight: 400;
        font-size: spacing(1.5);
    }

    .bit-prs-ttx {
        display: none;
    }

    .bit-prs-otx {
        display: none;
    }

    &.bit-prs-sqr {
        .bit-prs-pre {
            right: spacing(-0.4);
            bottom: spacing(-0.4);
        }


        &.bit-prs-rvs {
            .bit-prs-pre {
                right: unset;
                left: spacing(-0.4);
            }
        }
    }
}

.bit-prs-s48 {
    .bit-prs-ima {
        flex: 0 0 auto;
        width: spacing(6);
        height: spacing(6);
        position: relative;
        text-align: center;
    }

    .bit-prs-imc {
        aspect-ratio: 1;
        width: spacing(6);
        font-size: spacing(2);
    }

    .bit-prs-pre {
        width: spacing(1.5);
        height: spacing(1.5);
        font-size: spacing(0.85);
    }

    .bit-prs-det {
        padding: 0 spacing(1.5);
    }

    .bit-prs-ptx {
        font-weight: 400;
        font-size: spacing(1.75);
    }

    .bit-prs-stx {
        font-weight: 400;
        font-size: spacing(1.5);
    }

    .bit-prs-ttx {
        display: none;
    }

    .bit-prs-otx {
        display: none;
    }

    &.bit-prs-sqr {
        .bit-prs-pre {
            right: spacing(-0.4);
            bottom: spacing(-0.4);
        }

        &.bit-prs-rvs {
            .bit-prs-pre {
                right: unset;
                left: spacing(-0.4);
            }
        }
    }
}

.bit-prs-s56 {
    .bit-prs-ima {
        flex: 0 0 auto;
        width: spacing(7);
        height: spacing(7);
        position: relative;
        text-align: center;
    }

    .bit-prs-imc {
        aspect-ratio: 1;
        width: spacing(7);
        font-size: spacing(2.5);
    }

    .bit-prs-pre {
        width: spacing(2);
        height: spacing(2);
        font-size: spacing(1.25);
    }

    .bit-prs-det {
        padding: 0 spacing(2);
    }

    .bit-prs-ptx {
        font-weight: 400;
        font-size: spacing(2.5);
    }

    .bit-prs-stx {
        font-weight: 400;
        font-size: spacing(1.75);
    }

    .bit-prs-ttx {
        display: none;
    }

    .bit-prs-otx {
        display: none;
    }

    &.bit-prs-sqr {
        .bit-prs-pre {
            right: spacing(-0.5);
            bottom: spacing(-0.5);
        }

        &.bit-prs-rvs {
            .bit-prs-pre {
                right: unset;
                left: spacing(-0.5);
            }
        }
    }
}

.bit-prs-s72 {
    .bit-prs-ima {
        flex: 0 0 auto;
        width: spacing(9);
        height: spacing(9);
        position: relative;
        text-align: center;
    }

    .bit-prs-imc {
        aspect-ratio: 1;
        width: spacing(9);
        font-size: spacing(3.5);
    }

    .bit-prs-pre {
        width: spacing(2.5);
        height: spacing(2.5);
        font-size: spacing(1.5);
    }

    .bit-prs-det {
        padding: 0 spacing(2);
    }

    .bit-prs-ptx {
        font-weight: 400;
        font-size: spacing(2.5);
    }

    .bit-prs-stx {
        font-weight: 400;
        font-size: spacing(1.75);
    }

    .bit-prs-ttx {
        display: block;
        font-weight: 400;
        font-size: spacing(1.75);
    }

    .bit-prs-otx {
        display: none;
    }

    &.bit-prs-sqr {
        .bit-prs-pre {
            right: spacing(-1);
            bottom: spacing(-1);

            &.bit-prs-rvs {
                .bit-prs-pre {
                    right: unset;
                    left: spacing(-1);
                }
            }
        }
    }
}

.bit-prs-s100 {
    .bit-prs-ima {
        flex: 0 0 auto;
        position: relative;
        text-align: center;
        width: spacing(12.5);
        height: spacing(12.5);
    }

    .bit-prs-imc {
        aspect-ratio: 1;
        width: spacing(12.5);
        font-size: spacing(5.25);
    }

    .bit-prs-pre {
        width: spacing(3.5);
        height: spacing(3.5);
        font-size: spacing(2);
    }

    .bit-prs-det {
        padding: 0 spacing(2);
    }

    .bit-prs-ptx {
        font-weight: 400;
        font-size: spacing(2.5);
    }

    .bit-prs-stx {
        font-weight: 400;
        font-size: spacing(1.75);
    }

    .bit-prs-ttx {
        display: block;
        font-weight: 400;
        font-size: spacing(1.75);
    }

    .bit-prs-otx {
        display: block;
        font-weight: 400;
        font-size: spacing(1.75);
    }

    &.bit-prs-sqr {
        .bit-prs-pre {
            right: spacing(-1);
            bottom: spacing(-1);
        }

        &.bit-prs-rvs {
            .bit-prs-pre {
                right: unset;
                left: spacing(-1);
            }
        }
    }
}

.bit-prs-s120 {
    .bit-prs-ima {
        flex: 0 0 auto;
        width: spacing(15);
        position: relative;
        text-align: center;
        height: spacing(15);
    }

    .bit-prs-imc {
        aspect-ratio: 1;
        width: spacing(15);
        font-size: spacing(5.25);
    }

    .bit-prs-pre {
        width: spacing(4);
        height: spacing(4);
        font-size: spacing(2.5);
    }

    .bit-prs-det {
        padding: 0 spacing(2);
    }

    .bit-prs-ptx {
        font-weight: 400;
        font-size: spacing(2.5);
    }

    .bit-prs-stx {
        font-weight: 400;
        font-size: spacing(1.75);
    }

    .bit-prs-ttx {
        display: block;
        font-weight: 400;
        font-size: spacing(1.75);
    }

    .bit-prs-otx {
        display: block;
        font-weight: 400;
        font-size: spacing(1.75);
    }

    &.bit-prs-sqr {
        .bit-prs-pre {
            right: spacing(-1.5);
            bottom: spacing(-1.5);
        }

        &.bit-prs-rvs {
            .bit-prs-pre {
                right: unset;
                left: spacing(-1.5);
            }
        }
    }
}

.bit-prs-fil {
    color: var(--bit-prs-coin-clr-txt);
    border-color: var(--bit-prs-coin-clr-bg);
    background-color: var(--bit-prs-coin-clr-bg);
}

.bit-prs-otl {
    background-color: transparent;
    color: var(--bit-prs-coin-clr-bg);
    border-color: var(--bit-prs-coin-clr-bg);
}

.bit-prs-txt {
    border-color: transparent;
    background-color: transparent;
    color: var(--bit-prs-coin-clr-bg);
}

.bit-prs-pri {
    --bit-prs-coin-clr-bg: #{$clr-pri};
    --bit-prs-coin-clr-txt: #{$clr-pri-text};
}

.bit-prs-sec {
    --bit-prs-coin-clr-bg: #{$clr-sec};
    --bit-prs-coin-clr-txt: #{$clr-sec-text};
}

.bit-prs-ter {
    --bit-prs-coin-clr-bg: #{$clr-ter};
    --bit-prs-coin-clr-txt: #{$clr-ter-text};
}

.bit-prs-inf {
    --bit-prs-coin-clr-bg: #{$clr-inf};
    --bit-prs-coin-clr-txt: #{$clr-inf-text};
}

.bit-prs-suc {
    --bit-prs-coin-clr-bg: #{$clr-suc};
    --bit-prs-coin-clr-txt: #{$clr-suc-text};
}

.bit-prs-wrn {
    --bit-prs-coin-clr-bg: #{$clr-wrn};
    --bit-prs-coin-clr-txt: #{$clr-wrn-text};
}

.bit-prs-swr {
    --bit-prs-coin-clr-bg: #{$clr-swr};
    --bit-prs-coin-clr-txt: #{$clr-swr-text};
}

.bit-prs-err {
    --bit-prs-coin-clr-bg: #{$clr-err};
    --bit-prs-coin-clr-txt: #{$clr-err-text};
}


.bit-prs-pbg {
    --bit-prs-coin-clr-bg: #{$clr-bg-pri};
    --bit-prs-coin-clr-txt: #{$clr-fg-pri};
}

.bit-prs-sbg {
    --bit-prs-coin-clr-bg: #{$clr-bg-sec};
    --bit-prs-coin-clr-txt: #{$clr-fg-pri};
}

.bit-prs-tbg {
    --bit-prs-coin-clr-bg: #{$clr-bg-ter};
    --bit-prs-coin-clr-txt: #{$clr-fg-pri};
}

.bit-prs-pfg {
    --bit-prs-coin-clr-bg: #{$clr-fg-pri};
    --bit-prs-coin-clr-txt: #{$clr-bg-pri};
}

.bit-prs-sfg {
    --bit-prs-coin-clr-bg: #{$clr-fg-sec};
    --bit-prs-coin-clr-txt: #{$clr-bg-pri};
}

.bit-prs-tfg {
    --bit-prs-coin-clr-bg: #{$clr-fg-ter};
    --bit-prs-coin-clr-txt: #{$clr-bg-pri};
}

.bit-prs-pbr {
    --bit-prs-coin-clr-bg: #{$clr-brd-pri};
    --bit-prs-coin-clr-txt: #{$clr-fg-pri};
}

.bit-prs-sbr {
    --bit-prs-coin-clr-bg: #{$clr-brd-sec};
    --bit-prs-coin-clr-txt: #{$clr-bg-pri};
}

.bit-prs-tbr {
    --bit-prs-coin-clr-bg: #{$clr-brd-ter};
    --bit-prs-coin-clr-txt: #{$clr-bg-pri};
}
