@use '../variables' as vars;
@use '../functions' as func;

$-button-width: func.units(9);
$-toggle-dot-diameter: func.units(505);
$-offset: func.units(1);

.toggle-switch {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    padding-right: $-button-width;
    margin-bottom: func.units(5);
    background-color: func.color('transparent');
    border-radius: func.units(4);
    cursor: pointer;

    span {
        padding-right: func.units(4);
        text-align: left;
        overflow-wrap: break-word;
        max-width: 100%;
        color: func.color(vars.$toggle-label-color);
    }

    &::before {
        content: '';
        position: absolute;
        right: $-button-width - $-toggle-dot-diameter - $-offset;
        border-radius: 50%;
        border: func.border(vars.$toggle-off-dot-border);
        background-image: none;
        background-color: func.color(vars.$toggle-dot-background-color);
        background-position: center;
        background-repeat: no-repeat;
        background-size: func.units(4);
        min-width: $-toggle-dot-diameter;
        min-height: $-toggle-dot-diameter;
        transition: all 0.15s ease-out;
        z-index: vars.$zindex-toggle;
    }

    &[aria-checked='true']::before {
        right: $-offset;
        border-color: func.color(vars.$toggle-on-dot-border-color);
        background-image: url(vars.$icons-folder-path + 'check.svg');
    }

    &::after {
        content: '';
        position: absolute;
        right: 0;
        min-width: $-button-width;
        min-height: func.units(6);
        border-radius: func.units(4);
        background-color: func.color(vars.$toggle-off-background-color);
        border: func.border(vars.$toggle-off-border);
        transition: all 0.15s ease-out;
        margin-left: auto;
    }

    &[aria-checked='true']::after {
        background-color: func.color(vars.$toggle-on-background-color);
        border-color: func.color(vars.$toggle-on-border-color);
    }

    &:focus {
        outline: transparent;
        outline-offset: 0;

        &::after {
            outline: vars.$theme-focus-width vars.$theme-focus-style func.color("focus");
            outline-offset: 1px;
        }
    }

    &:hover {
        &::after {
            background-color: func.color(vars.$toggle-off-background-color-hover);
        }

        &[aria-checked='true']::after {
            background-color: func.color(vars.$toggle-on-background-color-hover);
            border-color: func.color(vars.$toggle-on-border-color-hover);
        }

        &[aria-checked='true']::before {
            border-color: func.color(vars.$toggle-on-dot-border-color-hover);
        }
    }

    &:disabled {
        opacity: 0.5;
        cursor: default;
        
        &:hover::after {
            background-color: func.color(vars.$toggle-off-background-color);
            cursor: not-allowed;
        }

        &:hover[aria-checked='true']::after {
            background-color: func.color(vars.$toggle-on-background-color);
            border-color: func.color(vars.$toggle-on-border-color);
            cursor: not-allowed;
        }

        &:hover::before {
            cursor: not-allowed;
        }

        span {
            color: func.color(vars.$toggle-label-color);
        }
    }
}