@use '../../styles/variables';

@mixin thy-switch-size($width, $height, $handle-margin) {
    width: $width;
    height: $height;
    .thy-switch-handle {
        width: $height - $handle-margin * 2;
        height: $height - $handle-margin * 2;
        top: $handle-margin + px;
    }
    .thy-switch-input:checked ~ .thy-switch-handle {
        left: $width - $height + $handle-margin;
    }
}

@mixin thy-switch($width, $height, $handle-margin) {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: $width;
    height: $height;
    background-color: transparent;
    cursor: variables.$hand-cursor;
    .thy-switch-input {
        position: absolute !important;
        top: 0;
        left: 0;
        opacity: 0;
    }
    .thy-switch-label {
        position: relative;
        display: block;
        height: inherit;
        font-weight: 600;
        text-transform: uppercase;
        background-color: variables.$gray-400;
        border-radius: 2px;
        transition: opacity background 0.15s ease-out;
    }
    .thy-switch-input:checked ~ .thy-switch-label::before {
        opacity: 0;
    }
    .thy-switch-input:checked ~ .thy-switch-label::after {
        opacity: 1;
    }
    .thy-switch-handle {
        position: absolute;
        top: $handle-margin + px;
        left: $handle-margin + px;
        width: $height - $handle-margin * 2;
        height: $height - $handle-margin * 2;
        background: variables.$white;
        border-radius: 1px;
        transition: left 0.15s ease-out;
        border: 0;
    }
    .thy-switch-input:checked ~ .thy-switch-handle {
        left: $width - $height + $handle-margin;
    }
    @extend .thy-switch-pill;
    &.thy-switch-sm {
        @include thy-switch-size(variables.$switch-sm-width, variables.$switch-sm-height, 2);
    }
    &.thy-switch-xs {
        @include thy-switch-size(variables.$switch-xs-width, variables.$switch-xs-height, 2);
    }
}

@mixin thy-switch-variant($color) {
    > .thy-switch-input:checked ~ .thy-switch-label {
        background: $color !important;
    }
}
