@import "../../../Styles/functions.scss";
@import "../../../Styles/media-queries.scss";

.bit-drm {
    width: fit-content;
    color: $clr-fg-pri;
    font-family: $tg-font-family;
    font-weight: $tg-font-weight;
    background-color: $clr-bg-pri;
    border-radius: $shp-border-radius;
    --bit-drm-transform-factor: 1;

    &.bit-rtl {
        --bit-drm-transform-factor: -1;
    }

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

    &:active {
        background-color: $clr-bg-pri-active;
    }

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

        .bit-drm-btn {
            cursor: default;
        }
    }
}

.bit-drm-btn {
    color: inherit;
    gap: spacing(1);
    cursor: pointer;
    width: fit-content;
    align-items: center;
    display: inline-flex;
    outline: transparent;
    font-weight: inherit;
    font-family: inherit;
    text-decoration: none;
    box-sizing: border-box;
    box-sizing: border-box;
    justify-content: center;
    background-color: transparent;
    padding: spacing(1.0) spacing(1.5);
}

.bit-drm-trn {
    background-color: transparent;

    &:hover,
    &:active {
        background-color: transparent;
    }
}

.bit-drm-ovl {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    z-index: $zindex-overlay;
    background-color: transparent;
}

.bit-drm-cal {
    display: none;
    position: fixed;
    box-sizing: border-box;
    z-index: $zindex-callout;
    animation-fill-mode: both;
    animation-duration: 0.367s;
    background-color: $clr-bg-pri;
    box-shadow: $box-shadow-callout;
    border-radius: $shp-border-radius;
    animation-name: bit-fade-show, bit-slide-down;
    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
}

.bit-drm-res {
    @include lt-sm {
        opacity: 0;
        height: 100%;
        display: block;
        overflow: hidden;
        max-height: unset;
        animation-name: unset;
        box-shadow: $box-shadow-callout;
        transition: transform 200ms ease-out, opacity 100ms linear;

        &.bit-drm-sta {
            inset-block: 0;
            inset-inline-start: 0;
            transform: translateX(calc(var(--bit-drm-transform-factor) * -100%));
        }

        &.bit-drm-end {
            inset-block: 0;
            inset-inline-end: 0;
            transform: translateX(calc(var(--bit-drm-transform-factor) * 100%));
        }

        &.bit-drm-top {
            top: 0;
            width: 100%;
            max-width: 100%;
            inset-inline: 0;
            transform: translateY(-100%);
        }

        &.bit-drm-btm {
            bottom: 0;
            width: 100%;
            max-width: 100%;
            inset-inline: 0;
            transform: translateY(100%);
        }
    }
}
