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

:root {
    --lt-arrow-default: 51, 154, 240;
    --lt-arrow-success: 46, 194, 92;
    --lt-arrow-warning: 250, 183, 28;
    --lt-arrow-error: 241, 79, 79;
}

@include b(wheel) {
    @include flex-column;


    width: fit-content;
    align-items: center;

    @each $type in (default, success, warning, error) {
        @include m($type) {
            color: getCssVar('color', $type);
            margin: 8px 0;
            font-size: 12px;
        }
    }

    @each $type in (default, success, warning, error) {
        .state-#{$type} {

            .active {
                border-top: 1px solid rgb(var(--lt-arrow-#{$type}));
                border-bottom: 1px solid rgb(var(--lt-arrow-#{$type}));
            }

            @if $type ==default {
                &:hover {
                    color: var(--lt-color-primary);
                    background: rgba(var(--lt-arrow-#{$type}), 0.2);

                }
            }

            @else {
                background: rgba(var(--lt-arrow-#{$type}), 0.2);
                color: var(--lt-color-primary);
            }

        }
    }

    @include e(content) {
        height: calc(27px * 5);
        overflow: hidden;
        position: relative;

        @include e(scroll-content) {
            &:hover {
                .active {
                    color: var(--lt-arrow-default);
                }
            }
        }


    }

    @include e(scroll-item) {
        height: 27px;

        @include apply-class('wheel', 'flex-center') {
            @include flex-center;
        }

        color: var(--lt-text-color-primary);
        padding: 0 12px;
        font-size: 14px;
        white-space: nowrap;
        cursor: pointer;

        &.disabled {
            color: var(--lt-color-regular);
            cursor: not-allowed;
        }

        &:not(.active) {
            opacity: 40%;
        }

        &.active {
            background: var(--lt-bg-color);
        }
    }

}