/* main rules */
.toggle.main-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 20px;
}

.toggle.main-container .label-text {
    margin-left: 8px;
    margin-top: 3px;
}

.toggle.main-container .main-toggle-container {
    height: 20px;
    width: 38px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-out;
}

.toggle.main-container .main-toggle-container .dot-toggle-container {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    transition: all 0.2s ease-out;
}

.toggle.main-container .main-toggle-container.disabled {
    cursor: not-allowed;
    opacity: 40%;
}

.toggle.main-container .main-toggle-container.unchecked .dot-toggle-container {
    margin-left: 3px;
}

.toggle.main-container .main-toggle-container.checked .dot-toggle-container {
    margin-left: 21px;
}

.toggle.main-container .main-toggle-container:hover .dot-toggle-container {
    box-shadow: 0px 2px 2px rgba(2, 24, 43, 0.2);
}

/* dark theme */
.toggle.main-container.dark .main-toggle-container.checked {
    background-color: var(--primary-01-dark-500);
}

.toggle.main-container.dark .main-toggle-container.checked .dot-toggle-container {
    background-color: var(--basic-dark-900);
}

.toggle.main-container.dark .main-toggle-container.checked:hover {
    background-color: var(--primary-01-dark-500);
}

.toggle.main-container.dark .main-toggle-container.checked:hover .dot-toggle-container {
    background-color: var(--basic-dark-900);
}

.toggle.main-container.dark .main-toggle-container.checked:focus {
    background-color: var(--primary-01-dark-500);
}

.toggle.main-container.dark .main-toggle-container.checked:focus .dot-toggle-container {
    background-color: var(--basic-dark-900);
}

.toggle.main-container.dark .main-toggle-container.checked.disabled {
    background-color: var(--primary-01-dark-500);
}

.toggle.main-container.dark .main-toggle-container.checked.disabled:hover {
    background-color: var(--primary-01-dark-500);
    box-shadow: none;
}

.toggle.main-container.dark .main-toggle-container.checked.disabled:focus {
    background-color: var(--primary-01-dark-500);
    box-shadow: none;
}

.toggle.main-container.dark .main-toggle-container.unchecked {
    background-color: var(--basic-dark-400);
}

.toggle.main-container.dark .main-toggle-container.unchecked .dot-toggle-container {
    background-color: var(--basic-dark-900);
}

.toggle.main-container.dark .main-toggle-container.unchecked:hover {
    background-color: var(--basic-dark-400);
}

.toggle.main-container.dark .main-toggle-container.unchecked:hover .dot-toggle-container {
    background-color: var(--basic-dark-900);
}

.toggle.main-container.dark .main-toggle-container.unchecked:focus {
    background-color: var(--basic-dark-400);
}

.toggle.main-container.dark .main-toggle-container.unchecked:focus .dot-toggle-container {
    background-color: var(--basic-dark-900);
}

.toggle.main-container.dark .main-toggle-container.unchecked.disabled {
    background-color: var(--basic-dark-400);
}

.toggle.main-container.dark .main-toggle-container.unchecked.disabled:hover {
    background-color: var(--basic-dark-400);
}

.toggle.main-container.dark .main-toggle-container.unchecked.disabled:focus {
    background-color: var(--basic-dark-400);
    box-shadow: none;
}

.toggle.main-container.dark .label-text {
    color: var(--basic-dark-900);
}

.toggle.main-container.dark .label-text.disabled {
    color: var(--basic-dark-400);
}

/* light theme */
.toggle.main-container.light .main-toggle-container.checked {
    background-color: var(--primary-01-light-500);
}

.toggle.main-container.light .main-toggle-container.checked .dot-toggle-container {
    background-color: var(--basic-light-100);
}

.toggle.main-container.light .main-toggle-container.checked:hover {
    background-color: var(--primary-01-light-500);
}

.toggle.main-container.light .main-toggle-container.checked:hover .dot-toggle-container {
    background-color: var(--basic-light-100);
}

.toggle.main-container.light .main-toggle-container.checked:focus {
    background-color: var(--primary-01-light-500);
}

.toggle.main-container.light .main-toggle-container.checked:focus .dot-toggle-container {
    background-color: var(--basic-light-100);
}

.toggle.main-container.light .main-toggle-container.checked.disabled {
    background-color: var(--primary-01-light-500);
}

.toggle.main-container.light .main-toggle-container.checked.disabled:hover {
    background-color: var(--primary-01-light-500);
    box-shadow: none;
}

.toggle.main-container.light .main-toggle-container.checked.disabled:focus {
    background-color: var(--primary-01-light-500);
    box-shadow: none;
}

.toggle.main-container.light .main-toggle-container.unchecked {
    background-color: var(--basic-light-500);
}

.toggle.main-container.light .main-toggle-container.unchecked .dot-toggle-container {
    background-color: var(--basic-light-100);
}

.toggle.main-container.light .main-toggle-container.unchecked:hover {
    background-color: var(--basic-light-500);
}

.toggle.main-container.light .main-toggle-container.unchecked:hover .dot-toggle-container {
    background-color: var(--basic-light-100);
}

.toggle.main-container.light .main-toggle-container.unchecked:focus {
    background-color: var(--basic-light-500);
}

.toggle.main-container.light .main-toggle-container.unchecked:focus .dot-toggle-container {
    background-color: var(--basic-light-100);
}

.toggle.main-container.light .main-toggle-container.unchecked.disabled {
    background-color: var(--basic-light-500);
}

.toggle.main-container.light .main-toggle-container.unchecked.disabled:hover {
    background-color: var(--basic-light-500);
}

.toggle.main-container.light .main-toggle-container.unchecked.disabled:focus {
    background-color: var(--basic-light-500);
    box-shadow: none;
}

.toggle.main-container.light .label-text {
    color: var(--basic-light-900);
}

.toggle.main-container.light .label-text.disabled {
    color: var(--basic-light-500);
}