@use 'sass:math';

// core
.p-inputswitch {
    display: inline-block;
}

.p-inputswitch-input {
    cursor: pointer;
}

.p-inputswitch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
}

.p-inputswitch-slider:before {
    position: absolute;
    content: '';
    top: 50%;
}

// theme
.p-inputswitch {
    width: $inputSwitchWidth;
    height: $inputSwitchHeight;

    .p-inputswitch-input {
        appearance: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        opacity: 0;
        z-index: 1;
        outline: 0 none;
        border-radius: $inputSwitchBorderRadius;
    }

    .p-inputswitch-slider {
        background: $inputSwitchSliderOffBg;
        transition: $formElementTransition;
        border-radius: $inputSwitchBorderRadius;
        outline-color: transparent;

        &:before {
            background: $inputSwitchHandleOffBg;
            width: $inputSwitchHandleWidth;
            height: $inputSwitchHandleHeight;
            left: $inputSwitchSliderPadding;
            margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
            border-radius: $inputSwitchHandleBorderRadius;
            transition-duration: $transitionDuration;
        }
    }

    &.p-highlight {
        .p-inputswitch-slider {
            background: $inputSwitchSliderOnBg;

            &:before {
                background: $inputSwitchHandleOnBg;
                transform: translateX($inputSwitchHandleWidth);
            }
        }
    }

    &:not(.p-disabled) {
        &:has(.p-inputswitch-input:hover) {
            .p-inputswitch-slider {
                background: $inputSwitchSliderOffHoverBg;
            }

            &.p-highlight {
                .p-inputswitch-slider {
                    background: $inputSwitchSliderOnHoverBg;
                }
            }
        }

        &:has(.p-inputswitch-input:focus-visible) {
            .p-inputswitch-slider {
                @include focused();
            }
        }
    }

    &.p-invalid > .p-inputswitch-slider {
        @include invalid-input();
    }
}