@use '../function' as *;
@use '../mixin';

@mixin form-switch() {
    .form-switch {
        display: flex;
        align-items: center;
        cursor: pointer;
        gap: rem(8);
        font-size: rem(14);
    }

    .form-switch-large {
        --r-form-switch-size: var(--r-form-switch-size-large);
    }

    .form-switch-input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: -1;
    }

    .form-switch-slider {
        position: relative;
        display: inline-block;
        flex-shrink: 0;
        width: var(--r-form-switch-size);
        height: calc(var(--r-form-switch-size) / 2);
        background-color: var(--r-form-switch-background-color);
        border-radius: rem(25);
        box-shadow: inset 0 0 rem(2) rem(3) rgba(0, 0, 0, 0.03);
        @include mixin.transition('background-color');

        .form-switch-input:checked + & {
            background-color: var(--r-form-switch-checked-background-color);
        }

        &::after {
            content: '';
            position: absolute;
            top: rem(2);
            left: rem(2);
            width: calc(var(--r-form-switch-size) / 2 - #{rem(4)});
            height: calc(var(--r-form-switch-size) / 2 - #{rem(4)});
            background-color: var(--r-form-switch-handler-color);
            border-radius: 50%;
            @include mixin.transition('left');
            will-change: left;

            .form-switch-input:checked + & {
                left: calc(var(--r-form-switch-size) / 2 + #{rem(2)});
            }
        }
    }

    .form-switch-large .form-switch-input:checked + .form-switch-slider::after {
        left: calc(var(--r-form-switch-size-large) / 2 + #{rem(1)});
    }

    .form-switch-label {
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        font-size: rem(14);
    }

    .form-switch-slider-text {
        margin-left: rem(8);
        display: inline-block;
    }
}

@mixin form-range() {
    .form-range {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: var(--r-form-range-height);
        background: var(--r-form-range-track-color);
        background: linear-gradient(
            to right,
            var(--r-form-range-thumb-color) 0%,
            var(--r-form-range-thumb-color) var(--r-form-range-value, 0%),
            var(--r-form-range-track-color) var(--r-form-range-value, 0%),
            var(--r-form-range-track-color) 100%
        );
        border-radius: var(--r-form-range-border-radius);

        &::-webkit-slider-runnable-track {
            height: var(--r-form-range-height);
        }

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: var(--r-form-range-thumb-size);
            height: var(--r-form-range-thumb-size);
            background: var(--r-form-range-thumb-color);
            border-radius: 50%;
            cursor: pointer;
            margin-top: calc(var(--r-form-range-height) / 2 - var(--r-form-range-thumb-size) / 2);
            @include mixin.transition('background');
        }

        &::-webkit-slider-thumb:hover {
            background: var(--r-form-range-thumb-hover-color);
        }
    }
}

@mixin form-radio-group() {
    .form-radio-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--r-form-radio-group-gap);

        .form-radio-item {
            border: rem(1) solid var(--r-form-input-border-color);
            border-radius: calc(var(--r-form-input-radius) * 2);
            padding: var(--r-form-radio-group-item-padding);
            display: flex;
            gap: calc(var(--r-form-radio-group-item-padding) / 2);
            align-items: flex-start;
            max-width: var(--r-form-radio-group-width);
            margin-right: 0;
            cursor: pointer;
            @include mixin.transition('border');

            &:has(.form-radio:checked) {
                border-color: var(--r-form-radio-selected-border-color);
                background-color: var(--r-form-radio-selected-background-color);
            }
        }

        .form-radio {
            position: static;
        }
    }

    .form-radio-hl {
        padding-bottom: rem(5);
        position: relative;
        top: rem(-3);
    }

    .form-radio-text {
        font-size: rem(12);
        line-height: rem(18);
        color: var(--r-form-radio-text-color);
    }

    .form-radio-group-vertical {
        flex-direction: column;
    }
}

@mixin form-datepicker() {
    .form-datepicker {
        position: relative;

        .form-input {
            appearance: none;
            height: rem(39);

            &::-webkit-calendar-picker-indicator {
                background: none;
            }
        }

        &::after {
            display: block;
            content: '';
            position: absolute;
            bottom: rem(10);
            right: rem(10);
            width: rem(18);
            height: rem(18);
            background-image: inline-svg(
                '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" color="#222733" viewBox="0 0 24 24"><path stroke="#222733" stroke-linecap="round" stroke-linejoin="round" d="M15 4V2m0 2v2m0-2h-4.5M3 10v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9H3ZM3 10V6a2 2 0 0 1 2-2h2M7 2v4M21 10V6a2 2 0 0 0-2-2h-.5"/></svg>'
            );
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: 0.7;
            pointer-events: none;
        }

        &.small {
            .form-input {
                height: rem(27);
            }

            &::after {
                top: rem(6);
                right: rem(6);
                width: rem(14);
                height: rem(14);
            }
        }

        &.large {
            .form-input {
                height: rem(44);
            }

            &::after {
                top: rem(12);
                right: rem(12);
            }
        }

        .theme-dark &::after {
            background-image: inline-svg(
                '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" color="#9ca3af" width="18" height="18" viewBox="0 0 24 24"><path stroke="#9ca3af" stroke-linecap="round" stroke-linejoin="round" d="M15 4V2m0 2v2m0-2h-4.5M3 10v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9H3ZM3 10V6a2 2 0 0 1 2-2h2M7 2v4M21 10V6a2 2 0 0 0-2-2h-.5"/></svg>'
            );
        }
    }

    .form-datepicker-js {
        .form-input {
            padding-right: rem(32);
        }
    }
}

@mixin form-timepicker() {
    .form-timepicker {
        @extend .form-datepicker;

        &::after {
            background-image: inline-svg(
                '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" color="#222733" width="18" height="18" viewBox="0 0 24 24"><path stroke="#222733" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h6"/><path stroke="#222733" stroke-linecap="round" stroke-linejoin="round" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"/></svg>'
            );
        }

        .theme-dark &::after {
            background-image: inline-svg(
                '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" color="#9ca3af" width="18" height="18" viewBox="0 0 24 24"><path stroke="#9ca3af" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h6"/><path stroke="#9ca3af" stroke-linecap="round" stroke-linejoin="round" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"/></svg>'
            );
        }
    }
}

@mixin roolith-form-extended() {
    @include form-switch();
    @include form-range();
    @include form-radio-group();
    @include form-datepicker();
    @include form-timepicker();
}