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

.thy-switch {
    margin-bottom: variables.$switch-margin-bottom;
    box-sizing: content-box;
    @include mixin.thy-switch(variables.$switch-width, variables.$switch-height, 2);

    .thy-switch-handle {
        .thy-switch-loading {
            animation: loading-circle 1s linear infinite;
        }
    }
}

@keyframes loading-circle {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

.thy-switch-disabled {
    cursor: variables.$disabled-cursor;
    opacity: 0.5;
    .thy-switch-label {
        &:focus {
            border: 1px solid variables.$gray-400 !important;
        }
    }
}

.thy-switch-pill {
    .thy-switch-handle,
    .thy-switch-label {
        border-radius: 20px !important;
        &:not(.disabled) {
            &:focus {
                outline: 0;
                border: 1px solid variables.$primary;
            }
        }
    }
    .thy-switch-label::before {
        right: 2px !important;
    }
    .thy-switch-label::after {
        left: 2px !important;
    }
}

$switch-theme: (
    (
        'primary': variables.$primary,
        'info': variables.$gray-400,
        'warning': variables.$warning,
        'danger': variables.$danger
    )
) !default;
@each $color, $value in $switch-theme {
    .thy-switch-#{$color} {
        @include mixin.thy-switch-variant($value);
    }
}
