@use "sass:map";
@use "./toggle.config" as config;
@use "../../01-core/external" as *;

@mixin ss-toggle {
    appearance: none;
    position: relative;

    display: inline-block;
    width: map.get(config.$ss-toggle-config, width);
    height: map.get(config.$ss-toggle-config, height);

    background: map.get(config.$ss-toggle-config, bg-off);
    border: 0;
    border-radius: var(--ss-radius-full);
    cursor: pointer;
    vertical-align: middle;

    transition: background map.get(config.$ss-toggle-config, duration) var(--ss-ease-in-out);

    &::after {
        content: "";
        position: absolute;
        top: map.get(config.$ss-toggle-config, knob-inset);
        left: map.get(config.$ss-toggle-config, knob-inset);

        width: calc(
            map.get(config.$ss-toggle-config, height) - map.get(
                    config.$ss-toggle-config,
                    knob-inset
                ) *
                2
        );
        height: calc(
            map.get(config.$ss-toggle-config, height) - map.get(
                    config.$ss-toggle-config,
                    knob-inset
                ) *
                2
        );

        background: map.get(config.$ss-toggle-config, knob);
        border-radius: 50%;

        transition: transform map.get(config.$ss-toggle-config, duration) var(--ss-ease-in-out);

    }

    &:checked {
        background: map.get(config.$ss-toggle-config, bg-on);

        &::after {
            transform: translateX(
                calc(
                    map.get(config.$ss-toggle-config, width) - map.get(
                            config.$ss-toggle-config,
                            height
                        )
                )
            );
        }
    }

    &:focus-visible {
        outline: var(--ss-focus-ring-width, #{q(2)}) solid var(--ss-focus-ring-color, currentColor);
        outline-offset: var(--ss-focus-ring-offset, #{q(2)});
    }

    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

// Toggle buttons (`ss-c-button` + `ss-c-toggle__button`, aria-pressed). The
// pressed state must read differently from the resting one, so the resting
// button is outlined and the pressed one is filled with the accent.

/// `__button-group`: buttons joined in a row.
@mixin ss-toggle-button-group {
    display: inline-flex;
}

/// Overlap neighbouring borders inside a group.
@mixin ss-toggle-button-joined {
    margin-inline-start: q(-1);
}

@mixin ss-toggle-button-resting {
    background: var(--ss-color-background);
    color: var(--ss-color-text-primary);
    border-color: var(--ss-color-border-strong);
}

@mixin ss-toggle-button-pressed {
    background: var(--ss-color-accent);
    color: var(--ss-color-on-accent);
    border-color: var(--ss-color-accent);
}