ToggleSwitch.css

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

.switch {
    cursor: pointer;
    text-indent: -9999px;
    width: 45px;
    height: 20px;
    background: #b3b3b37a;
    display: flex;
    border-radius: 100px;
    position: relative;
    flex-direction: row;
    align-items: center;

    &::after {
        content: '';
        margin-left: -7px;
        margin-right: 15px;
        width: 18px;
        height: 18px;
        background: #fff;
        border-radius: 90px;
        transition: 0.3s;
        background-image: url('/img/removeIcon.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 8px;
        border: 1px solid #ededed;
    }
}

.activeSwitch {
    background: color2;

    &::after {
        background-image: url('/img/check.svg');
        background-size: 10px;
        right: calc(100% + 5px);
        transform: translateX(125%);
    }
}

.input {
    height: 0;
    width: 0;
    visibility: hidden;
}

.searchSwitch {
    cursor: pointer;
}