/*
 * My Work — Element Settings
 *
 * Единые настройки и стили компонентов интерфейса.
 *
 * Цвета: theme.css
 * Типографика: base.css
 * Компоненты: element-settings.css
 */

:root {
    /* ========================================
       КНОПКИ
       ======================================== */

    /* Высота кнопок */
    --button-height-sm: 34px;
    --button-height-md: 40px;
    --button-height-lg: 46px;

    /* Горизонтальные внутренние отступы */
    --button-padding-x: 16px;

    /* Расстояние между иконкой и текстом */
    --button-gap: 8px;

    /* Скругление кнопок */
    --button-radius: 14px;


    /* ========================================
       ПОЛЯ ВВОДА
       ======================================== */

    /* Высота обычного поля */
    --input-height: 40px;

    /* Горизонтальные внутренние отступы */
    --input-padding-x: 14px;

    /* Скругление полей */
    --input-radius: 14px;


    /* ========================================
       КАРТОЧКИ
       ======================================== */

    /* Внутренний отступ карточки */
    --card-padding: 20px;

    /* Скругление карточки */
    --card-radius: 20px;


    /* ========================================
       МОДАЛЬНЫЕ ОКНА
       ======================================== */

    /* Скругление модального окна */
    --modal-radius: 20px;

    /* Внутренний отступ */
    --modal-padding: 24px;

    /* Максимальная ширина */
    --modal-max-width: 520px;


    /* ========================================
       ЧЕКБОКСЫ
       ======================================== */

    /* Размер чекбокса */
    --checkbox-size: 18px;

    /* Скругление чекбокса */
    --checkbox-radius: 5px;

    /* Расстояние между чекбоксом и подписью */
    --checkbox-gap: 10px;


    /* ========================================
       ПЕРЕКЛЮЧАТЕЛИ
       ======================================== */

    /* Ширина переключателя */
    --switch-width: 40px;

    /* Высота переключателя */
    --switch-height: 24px;

    /* Диаметр подвижного индикатора */
    --switch-thumb-size: 18px;


    /* ========================================
       ВЫПАДАЮЩИЕ СПИСКИ
       ======================================== */

    /* Высота Select */
    --select-height: 40px;

    /* Скругление Select */
    --select-radius: 14px;

    /* Высота строки меню */
    --select-option-height: 40px;

    /* Максимальная высота выпадающего меню */
    --select-menu-max-height: 200px;


    /* ========================================
       УВЕДОМЛЕНИЯ И TOAST
       ======================================== */

    /* Скругление уведомлений */
    --notification-radius: 14px;

    /* Внутренний отступ уведомления */
    --notification-padding: 14px;

    /* Скругление Toast */
    --toast-radius: 14px;

    /* Внутренний отступ Toast */
    --toast-padding: 14px;


    /* ========================================
       АНИМАЦИИ
       ======================================== */

    /* Быстрая анимация */
    --motion-fast: 150ms;
}


/* ========================================
   КНОПКИ
   ======================================== */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);

    height: var(--button-height-md);
    padding: 0 var(--button-padding-x);

    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);

    background: var(--surface);
    color: var(--text-color);

    cursor: pointer;
}

.ds-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--button-primary-text);
}


/* ========================================
   ПОЛЯ ВВОДА
   ======================================== */

.ds-input {
    width: 100%;
    min-height: var(--input-height);
    padding: 0 var(--input-padding-x);

    border: 1px solid var(--border-color);
    border-radius: var(--input-radius);

    background: var(--surface);
    color: var(--text-color);
}

.ds-input:focus {
    outline: none;
    border-color: var(--accent);
}


/* ========================================
   КАРТОЧКИ
   ======================================== */

.ds-card {
    padding: var(--card-padding);

    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);

    background: var(--surface);
}