@value colors: 'src/common-ui/colors.css';
@value color2, color11, color8, color7, color6 from colors;

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    margin: auto 30px auto auto;
}

.value {
    margin: auto;
    margin-left: 32px;
    font-style: normal;
    font-weight: normal;
    line-height: 37px;
    font-size: 14px;
    color: #1a2f58;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;

    &::before {
        position: absolute;
        content: '';
        height: 24px;
        width: 24px;
        background-color: white;
        transition: 0.4s;
        background-image: url('/img/removeIcon.svg');
        background-size: 52%;
        box-shadow: 0px 1px 2px 1px color8;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.sliderChecked {
    background-color: color2;

    &::before {
        transform: translateX(23px);
        background-image: url('/img/check.svg');
        background-size: 52%;
        box-shadow: 0px 1px 2px 1px color8;
    }
}

input:focus + .slider {
    box-shadow: 0 0 1px #5cd9a6;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
    height: 23px;
    align-items: center;
    display: flex;

    &::before {
        border-radius: 50%;
    }
}

.tagName {
    display: inline-flex;
    width: 100%;
    height: 37px;

    &:hover {
        background-color: color7;
    }
}

.toggleButton {
    margin: auto;
    color: color2;
    cursor: pointer;
}
