/* ============================================================================
   06-COMPONENTS -> #SWITCH
   ========================================================================= */

/**
 * A control used to switch between on and off states.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Switch
 */

.switch {
    --switch-bg: var(--form-option-bg);
    --switch-height: var(--space-5);
    --switch-icon-bg: var(--color-white);
    --switch-icon-offset: .125rem;
    --switch-icon-size: var(--space-4);
    --switch-label-color: var(--form-label-color);
    --switch-label-font-weight: var(--form-label-font-weight);
    --switch-width: var(--space-9);
    --switch-active-bg: var(--form-option-active-bg);

    display: flex;
    flex-direction: column;
    min-height: var(--switch-height);
    min-width: var(--switch-width);
    position: relative;
    z-index: var(--z-index-0);
}


/**
 * Switch input
 *
 * 1. Set the 'border-radius' to be exactly half of the switch height to ensure
 *    it is always perfectly curved.
 */

.switch__input {
    @include form-input-focus;
    @include transition(('border-color', 'box-shadow'), var(--duration-sm));
    appearance: none;
    border-radius: calc(var(--switch-height) / 2); // [1]
    cursor: pointer;
    height: var(--switch-height);
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: var(--switch-width);
}


/**
 * Switch label
 *
 * 1. Set the 'border-radius' to be exactly half of the height to ensure it is
 *    always perfectly curved.
 */

.switch__label {
    @include font-size('sm');
    color: var(--switch-label-color);
    font-weight: var(--switch-label-font-weight);
    padding-left: calc(var(--switch-width) + var(--space-2));
    pointer-events: none;

    &::before {
        @include transition(('background-color'), var(--duration-sm));
        background-color: var(--switch-bg);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 50% 50%;
        border-radius: calc(var(--switch-height) / 2); // 1]
        box-shadow: var(--shadow-xs);
        content: "";
        height: var(--switch-height);
        left: 0;
        position: absolute;
        top: 0;
        width: var(--switch-width);
    }

    &::after {
        @include transition(('transform'), var(--duration-sm));
        background-color: var(--switch-icon-bg);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 50% 50%;
        border-radius: calc(var(--switch-icon-size) / 2); // [1]
        box-shadow: var(--shadow-xs);
        content: "";
        height: var(--switch-icon-size);
        left: var(--switch-icon-offset);
        position: absolute;
        top: var(--switch-icon-offset);
        width: var(--switch-icon-size);
        z-index: var(--z-index-10);
    }
}

.switch__input:checked ~ .switch__label {
    &::before {
        background-color: var(--switch-active-bg);
    }

    &::after {
        transform: translateX(100%);
    }
}