/* bot_app/web_app/css/components/toggles.css */

/* Стили для контейнера переключателей и самих переключателей */
.toggle-switches-container {
    display: flex;
    justify-content: center; /* Изменено со space-around на center */
    align-items: center;
    gap: 40px; /* Добавлен отступ между элементами */
    width: 100%;
    max-width: 300px;
    margin: 15px 0;
}

.toggle-switch {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #aaa;
}

.toggle-switch .label-text {
    margin-left: 8px;
}

.toggle-switch input[type="checkbox"] {
    display: none;
}

.toggle-switch .slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: #333;
    border-radius: 12px;
    transition: background-color 0.3s;
}

.toggle-switch .slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-switch input:checked + .slider {
    background-color: #28a745; /* Зеленый цвет при включении */
}

.toggle-switch input:checked + .slider::before {
    transform: translateX(20px);
}