@import "../utils";

.rio-switch {
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;

    // This reserves space for the outline so the switch doesn't change size
    // when it's enabled or disabled
    padding: 0.15rem;

    // Create a stacking context. This is needed so that the child elements
    // aren't rendered above dialogs/popups/overlays.
    z-index: 0;

    // This div is centered in the allocated space
    & > div {
        pointer-events: auto;
        position: relative;

        width: 2.8rem;
        height: 1.6rem;

        background-color: var(--rio-global-disabled-bg);
        border-radius: $infinite-corner-radius;

        z-index: 1;

        outline: 0.15rem solid var(--rio-global-disabled-bg-variant);

        transition:
            all 0.3s ease-in-out,
            outline 0.15s linear;
    }

    svg {
        width: 100%;
        height: 100%;
        margin-top: 0.1rem;

        transition: fill 0.1s ease-in-out;
    }

    & > div > input {
        position: relative;

        width: 100%;
        height: 100%;

        padding: 0;
        margin: 0;

        opacity: 0;
        cursor: pointer;
        z-index: 3;
    }

    & > div > .knob {
        z-index: 2;
        position: absolute;

        top: 0.2rem;
        left: 0.2rem;
        width: 1.2rem;
        height: 1.2rem;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: $infinite-corner-radius;
        background-color: var(--rio-global-disabled-bg-variant);
        --icon-color: transparent;

        transition: all 0.3s cubic-bezier(0.2, 0.9, 0.35, 1.15);
    }

    &:not(.rio-switcheroo-disabled) > div > input:active + .knob {
        width: 1.8rem;
    }
}

.rio-switch.is-on {
    & > div {
        background-color: var(--rio-local-level-2-bg);
        outline: 0rem solid var(--rio-global-disabled-bg-variant);
    }

    & > div > .knob {
        left: 1.4rem;
        background-color: var(--rio-local-bg);
        --icon-color: var(--rio-local-level-2-bg);
    }

    &:not(.rio-switcheroo-disabled) > div > input:active + .knob {
        left: 0.8rem;
    }
}

.rio-switch.rio-switcheroo-disabled {
    opacity: 0.8;

    & > div {
        background-color: transparent !important;
        outline: 0.15rem solid var(--rio-global-disabled-bg-variant) !important;
    }

    & > div > input {
        cursor: default !important;
    }

    & > div > .knob {
        background-color: var(--rio-global-disabled-bg-variant) !important;
    }
}

.rio-switch.rio-switcheroo-disabled.is-on > div > .knob {
    --icon-color: var(--rio-global-disabled-fg) !important;
}
