@import '../styles/variables';

.main {
    display: block;
    width: 48px;
    min-width: 48px;
    height: 24px;
    border: $default-border;
    border-radius: 18px;
    background-color: #f8f8f8;
    cursor: pointer;
    box-shadow: 3px 3px 5px 0 rgba(11, 5, 13, 0.13) inset;
    position: relative;
    box-sizing: border-box;
}

.icon {
    color: white;
    position: absolute;
    top: 50%;
    right: 50%;
    font-size: 10px;
    transform: translate(50%, -50%);
}

.input {
    opacity: 0;
    width: 100%;
    height: 100%;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    cursor: pointer;
}

.switch .toggleInner {
    background-color: $duda-orange;
    span.dotInner {
        border-radius: 50%;
        background-color: #fff;
        top: calc(50% - 3px);
        left: calc(50% - 3px);
        position: absolute;
        width: 6px;
        height: 6px;
        transition: transform 0.15s ease, background-color 0.2s ease;
    }
}

.toggleInner {
    box-shadow: 3px 3px 5px 0 rgba(11, 5, 13, 0.13);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    transition: transform 0.15s ease, background-color 0.2s ease;
}

.toggleInnerLeft {
    composes: toggleInner;
    transform: translateX(2px);
    background-color: #b3babc;
    margin-inline-start: 0;
    .icon {
        right: 52%;
    }

    [dir='rtl'] & {
        transform: translateX(-2px);
    }
}

.toggleInnerRight {
    composes: toggleInner;
    transform: translateX(23px);
    margin-inline-start: 1px;
    background-color: $button-color;
    .icon {
        color: $text-on-button;
    }

    [dir='rtl'] & {
        transform: translateX(-23px);
    }
}

.disabled {
    background-color: $disabled-bg;
}