@use  '../../assets/styles/effects' as *;

@mixin control-switch-size($size) {
    :global(.uui-switch-body) {
        height: $size;
        width: $size * 2;
    }

    :global(.uui-switch-toggler) {
        height: $size;
        width: $size;
    }

    :global(.uui-input-label) {
        @if ($size == 12px) {
            font-size: 12px;
            letter-spacing: 0.2px;
        } @else if ($size == 18px or $size == 24px) {
            font-size: 14px;
            letter-spacing: 0.1px;
        }
    }

    :global(.uui-checked) {
        :global(.uui-switch-toggler) {
            transform: translateX($size);
        }
    }
}

.root {
    --uui-switch-bg: var(--uui-control_switch-bg);
    --uui-switch-border-hover: var(--uui-control_switch-border-hover);
    --uui-switch-bg-checked: var(--uui-color-50);
    --uui-switch-bg-hover: var(--uui-control-bg-hover);
    --uui-switch-bg-disabled: var(--uui-control-bg-disabled);
    --uui-switch-bg-checked-hover: var(--uui-color-60);
    --uui-switch-bg-checked-disabled: var(--uui-color-20);
    --uui-switch-border: var(--uui-control-border);
    --uui-switch-border-checked: var(--uui-color-50);
    --uui-switch-border-disabled: var(--uui-control-border-disabled);
    --uui-switch-border-checked-hover: var(--uui-color-60);
    --uui-switch-border-checked-disabled: var(--uui-color-20);
    --uui-switch-label: var(--uui-control-label);
    --uui-switch-label-disabled: var(--uui-control-label-disabled);
    --uui-switch-toggler-bg: var(--uui-control_switch-toggler-bg);
    --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
    --uui-switch-toggler-border-checked: var(--uui-color-50);
    --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
    --uui-switch-toggler-border-disabled: var(--uui-control-border-disabled);
    --uui-switch-toggler-border-checked-hover: var(--uui-color-60);
    --uui-switch-toggler-border-checked-disabled: var(--uui-color-20);

    --uui-switch-font: var(--font-regular);
    //Sizes
    &.size-12 {
        @include control-switch-size(12px);
    }

    &.size-18 {
        @include control-switch-size(18px);
    }

    &.size-24 {
        @include control-switch-size(24px);
    }

    :global(.uui-switch-body) {
        background-color: var(--uui-switch-bg);
        border: 1px solid var(--uui-switch-border);
        width: 36px;
        border-radius: 18px;
        box-sizing: border-box;

        :global(input[type='checkbox']):focus-visible {
            @include focus-visible-effect(2px, inherit);
            width: inherit;
            height: inherit;
            position: absolute;
            left: 0;
        }
    }

    :global(.uui-switch-toggler) {
        left: -1px;
        border-radius: 50%;
        box-sizing: border-box;
        background-color: var(--uui-switch-toggler-bg);
        border: 1px solid var(--uui-switch-bg);
        transition: 0.1s transform cubic-bezier(0.4, 0, 0.2, 1);
    }

    :global(.uui-input-label) {
        font-family: var(--uui-switch-font);
        font-weight: var(--uui-switch-font-weight, normal);
        color: var(--uui-switch-label);
        margin-left: 11px;
    }

    //Colors
    &:hover, &:focus-within {
        :global(.uui-switch-body) {
            background-color: var(--uui-switch-bg-hover);
            border-color: var(--uui-switch-border-hover);
        }

        :global(.uui-switch-toggler) {
            border-color: var(--uui-switch-toggler-border-hover);
        }

        :global(.uui-checked) {
            &:global(.uui-switch-body) {
                background-color: var(--uui-switch-bg-checked-hover);
                border-color: var(--uui-switch-border-checked-hover);
            }

            :global(.uui-switch-toggler) {
                border-color: var(--uui-switch-toggler-border-checked-hover);
            }
        }
    }

    :global(.uui-checked) {
        &:global(.uui-switch-body) {
            background-color: var(--uui-switch-bg-checked);
            border: 1px solid var(--uui-switch-border-checked);

            :global(.uui-switch-toggler) {
                border: 1px solid var(--uui-switch-toggler-border-checked);
            }
        }
    }

    &:global(.uui-disabled) {
        :global(.uui-input-label) {
            color: var(--uui-switch-label-disabled);
        }

        &,
        :global(.uui-switch-toggler),
        :global(.uui-switch-body),
        :global(.uui-input-label) {
            cursor: default;
        }

        :global(.uui-switch-body) {
            background-color: var(--uui-switch-bg-disabled);
            border: 1px solid var(--uui-switch-border-disabled);
        }

        & :global(.uui-switch-toggler),
        &:hover :global(.uui-switch-toggler),
        &:focus-within :global(.uui-switch-toggler) {
            background-color: var(--uui-switch-toggler-bg-disabled);
            border-color: var(--uui-switch-toggler-border-disabled);
        }

        :global(.uui-checked) {
            &:global(.uui-switch-body) {
                background-color: var(--uui-switch-bg-checked-disabled);
                border: 1px solid var(--uui-switch-border-checked-disabled);
            }

            :global(.uui-switch-toggler) {
                background-color: var(--uui-switch-toggler-bg-disabled);
                border-color: var(--uui-switch-toggler-border-checked-disabled);
            }
        }
    }
}
