@use '../../../assets/styles/scss/index'  as *;

.root {
    :global(.uui-tooltip-body) {
        background-color: $night700;
        padding: 0 10px;
        color: white;
        line-height: 24px;
        font-size: 14px;
        font-family: $font-sans;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    }

    :global(.uui-tooltip-arrow) {
        border: 5px solid transparent;
    }

    :global(.uui-slider-scale-number) {
        font-size: 11px;
        font-family: $font-sans;
        color: $night700;
        margin-top: 10px;
    }

    :global(.uui-slider-scale-dot) {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        top: -1px;
    }

    &:global(.uui-slider-container) {
        height: 12px;

        :global(.uui-slider) {
            margin: 0 6px 0 6px;
            width: 100%;
            height: 3px;
            border-radius: 10px;
            background: $night500;
            min-width: 100px;
        }

        :global(.uui-slider-scale) {
            height: 6px;
        }

        :global(.uui-slider-handle) {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: $sky;
            cursor: pointer;
        }

        :global(.uui-slider-filled) {
            margin: 0 6px;
            height: 3px;
            border-radius: 10px;
            background-color: $sky;
        }

        :global(.uui-slider-scale-dot) {
            background-color: $night200;
            border: 1px $night500 solid;
        }

        &:hover {
            :global(.uui-slider) {
                background-color: $sky-light;
            }

            :global(.uui-slider-scale-dot):not(:global(.uui-slider-scale-filled-dot)) {
                border-color: $sky-light;
                background-color: $sky-light;
            }
        }

        :global(.uui-slider-scale-filled-dot) {
            background-color: $sky;
            border-color: $sky;
        }

        &:global(.uui-active) {
            :global(.uui-slider) {
                background-color: $sky-light;
            }

            :global(.uui-slider-scale-dot):not(:global(.uui-slider-scale-filled-dot)) {
                border-color: $sky-light;
                background-color: $sky-light;
            }
        }

        &:global(.uui-disabled) {
            pointer-events: none;

            :global(.uui-slider-filled) {
                background-color: $night400;
            }

            :global(.uui-slider-handle) {
                background-color: $night400;
            }

            :global(.uui-slider) {
                background-color: $night400;
            }

            :global(.uui-slider-scale-filled-dot) {
                background-color: $night400;
                border-color: $night400;
            }
        }
    }
}
