@import '../style/themes/default.less';

@switch-prefix-cls: ~"@{sino-prefix}-switch";

.@{switch-prefix-cls} {
    position: relative;
    display: inline-block;
    width: @switch-width;
    height: @switch-height;
    font-size: @switch-size;
    color: @switch-font-color;
    background-color: @switch-background-color;
    border: @switch-border;
    border-radius: @switch-node-size;
    transition: background-color @switch-transition-duration;

    &-node {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: (@switch-height - @switch-node-size) / 2;
        left: (@switch-height - @switch-node-size) / 2;
        z-index: @switch-node-z-index;
        width: @switch-node-size;
        height: @switch-node-size;
        background-color: @switch-node-background-color;
        border-radius: 100%;
        box-shadow: @switch-node-off-box-shadow;
        transition: transform @switch-transition-duration cubic-bezier(.3, 1.05, .4, 1.05);

        &-inner-text {
            display: inline-block;
            width: .34rem * 2;
            font-size: .34rem;
            white-space: nowrap;
            transform: scale(.5);
            transform-origin: center;
        }
    }

    &-on {
        color: @switch-on-background-color;
        background-color: @switch-on-background-color;

        .@{switch-prefix-cls}-node {
            transform: translateX(@switch-width - @switch-height);
            box-shadow: @switch-node-on-box-shadow;
        }
    }

    &-disabled {
        opacity: @switch-disabled-opacity;
    }
}
