@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 {
    //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(.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) {
        //@include typography-inline; TODO: ???
        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);
            }
        }
    }
}
