@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'mixins/flex' as *;

:root {
    --lt-viewer-default: 0, 0, 0;
}

@include b(viewer) {
    width: fit-content;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;

    @include e(img) {}

    @include e(controls) {
        cursor: pointer;
        font-size: 23px;
        background-color: getCssVar('text-color', 'regular');
        border-color: var(--bg-color-fff);
        border-radius: 22px;
        color: var(--bg-color-fff);
        padding: 8px 10px;

        @include items-center;

    }

    @include e(controls-left) {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        flex-direction: column;
        cursor: pointer;

        .lt-icon {
            margin: 5px 0;
        }
    }

    @include e(controls-right) {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        flex-direction: column;

        cursor: pointer;

        .lt-icon {
            margin: 5px 0;
        }
    }

    @include e(controls-bottom) {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        justify-content: space-around;

        .lt-icon {
            margin: 0 5px;
        }
    }

    @include e(controls-top) {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        justify-content: space-around;

        .lt-icon {
            margin: 0 5px;
        }
    }

}