/* (c) Copyright Frontify Ltd., all rights reserved. */

@import '../../../utilities/sizeToken.module.scss';
@import '../../../utilities/focusStyle.module.scss';
@import '../../../utilities/transitions.module.scss';

.root {
    position: relative;
    display: flex;

    align-items: center;

    user-select: none;
    touch-action: none;

    width: 100%;
    box-sizing: border-box;

    &[data-disabled] {
        pointer-events: none;
    }

    //add a border radius to the thumbs parent so it doesn't capture clicks outside
    span:has(> .thumb) {
        border-radius: 100%;
    }
}

.track {
    background-color: var(--box-neutral-color);
    position: relative;
    flex-grow: 1;
    border-radius: 4px;
    height: sizeToken(1);

    .range {
        position: absolute;
        background-color: var(--box-neutral-strong-color);
        border-radius: 4px;
        height: 100%;

        &[data-disabled] {
            background-color: var(--box-neutral-color);
        }
    }
}

.thumb {
    @include transition-colors;
    @include transition(outline);

    --slider-thumb-hover-box-shadow-color: color-mix(
        in srgb,
        var(--box-neutral-inverse-color-pressed) 15%,
        transparent
    );
    --slider-thumb-active-outline-color: color-mix(in srgb, var(--box-neutral-inverse-color-hover) 20%, transparent);
    --slider-thumb-disabled-border-color: color-mix(in srgb, var(--box-neutral-inverse-color-pressed) 10%, transparent);

    display: block;

    width: sizeToken(5);
    height: sizeToken(5);

    background-color: var(--base-color);
    border: 1px solid var(--line-color-strong);
    border-radius: 100%;
    outline: 0 solid var(--slider-thumb-active-outline-color);

    cursor: pointer;
    box-sizing: border-box;

    &:hover {
        box-shadow: 0px 3px 10px 0px var(--slider-thumb-hover-box-shadow-color);

        &:active,
        //firefox support requires this additional selector
        &[data-show-focus-ring='false']:focus-visible {
            outline-width: sizeToken(2);
        }
    }

    &[data-show-focus-ring='false']:not(:active) {
        outline-width: sizeToken(1);
    }

    &:not([data-show-focus-ring='false']) {
        @include transition-box-shadow;
        @include focus-outline;
    }

    &[data-disabled] {
        background-color: var(--box-neutral-color);
        border-color: var(--slider-thumb-disabled-border-color);
    }
}
