styles.css - master - likeyoucan/todoDays

styles.css
1 554 строки41 KB
likeyoucan
upd
26 июл 2025, 22:53
26 июл 2025, 22:53164d7ad
:root {
  --base_size: 10px; /* Переменная для базового размера */
  /* Модуль 5px */

  /* размеры S */
  --margin-w-s: 0.5rem;
  --margin-h-s: 0.5rem;
  --padding-w-s: 0.5rem;
  --padding-h-s: 0.5rem;
  --item-w-s: 4rem;
  --item-h-s: 4rem;
  --h-font-s: 1.2rem;
  --h-line-height-s: 1.2;
  --p-font-s: 1rem;
  --p-line-height-s: 1.5;
  /* размеры M */
  --margin-w-m: 1rem;
  --margin-h-m: 1rem;
  --padding-w-m: 1rem;
  --padding-h-m: 1rem;
  --item-w-m: 6rem;
  --item-h-m: 6rem;
  --h-font-m: 1.5rem;
  --h-line-height-m: 1.2;
  --p-font-m: 1.2rem;
  --p-line-height-m: 1.5;
  /* размеры Base */
  --margin-w: 2rem;
  --margin-h: 2rem;
  --padding-w: 2rem;
  --padding-h: 2rem;
  --item-w: 8rem;
  --item-h: 8rem; /* Переменная для высоты элемента */
  --h-font: 2.2rem;
  --h-line-height: 1.2;
  --p-font: 1.4rem;
  --p-line-height: 1.5;
  /* размеры XL */
  --margin-w-xl: 3rem;
  --margin-h-xl: 3rem;
  --padding-w-xl: 4rem;
  --padding-h-xl: 4rem;
  --item-w-xl: 10rem;
  --item-h-xl: 10rem;
  --h-font-xl: 2.6rem;
  --h-line-height-xl: 1.2;
  --p-font-xl: 1.8rem;
  --p-line-height-xl: 1.5;
  /* размеры XXL */
  --margin-w-xxl: 4rem;
  --margin-h-xxl: 4rem;
  --padding-w-xxl: 6rem;
  --padding-h-xxl: 6rem;
  --item-w-xxl: 12rem;
  --item-h-xxl: 12rem;
  --h-font-xxl: 3.2rem;
  --h-line-height-xxl: 1.2;
  --p-font-xxl: 2rem;
  --p-line-height-xxl: 1.5;
  /* Дополнительно */
  --content-wrap: 100%;
  --radius-s: 0.5rem;
  --radius-m: 1.5rem;
  --radius: 3rem;
  --font-base: "Inter", "Helvetica Neue", Helvetica, system-ui,
    BlinkMacSystemFont, -apple-system, sans-serif;
  --outline: 0;
  /*  Icons */
  --scale-size: 1;
  --icon-shape: 0.2rem;
  --icon-size-s: 3rem;
  --icon-size-m: 4rem;
  --icon-size: 6rem;
  --icon-size-xl: 8rem;
  /*  Colors */
  --main-background-c: var(--color-cover-hover);
  --main-font-c: lch(
    from var(--main-background-c) calc((49.44 - l) * infinity) 0 0
  );
  --accent-blue: oklch(0.62 0.23 246);
  --accent-blue-hover: oklch(0.42 0.22 246);
  --accent-yellow: oklch(0.85 0.15 101);
  --accent-yellow-hover: oklch(0.65 0.15 101);
  /* 1. Голубая группа */
  --pastel-light-blue: oklch(0.82 0.08 235);
  --pastel-blue-dark: oklch(0.72 0.08 235);

  /* 2. Мятная группа */
  --pastel-mint: oklch(0.85 0.07 165);
  --pastel-mint-dark: oklch(0.76 0.07 165);

  /* 3. Персиковая группа */
  --pastel-peach: oklch(0.88 0.09 40);
  --pastel-peach-dark: oklch(0.78 0.09 40);

  /* 4. Лавандовая группа */
  --pastel-lavender: oklch(0.8 0.06 290);
  --pastel-lavender-dark: oklch(0.7 0.06 290);

  /* 5. Пудровая группа */
  --pastel-pink: oklch(0.86 0.05 350);
  --pastel-pink-dark: oklch(0.76 0.05 350);

  /* 6. Green группа */
  --pastel-green: oklch(0.82 0.09 150);
  --pastel-green-hover: oklch(0.72 0.09 150);

  /* Светлая тема по умолчанию */
  --color-cover: oklch(0.95 0 0);
  --color-font-primary: oklch(0.12 0.01 260);
  --color-cover-item: oklch(0.97 0.01 260);
  --color-border: oklch(0.85 0.01 260);
  --color-cover-hover: oklch(0.9 0.01 260);
  /* Акцентные цвета */
  --accent-color: var(--accent-blue);
  --accent--color-hover: var(--accent-blue-hover);
  /* серый*/
  --color-gray: oklch(0.76 0 0);
  /* Цвет поля заметок  */
  --color-notes: oklch(94.761% 0.04578 109.969 / 0.4);
  /* Состояния */
  --color-disabled: oklch(0.85 0 0);
  --color-success: oklch(0.65 0.2 145);
  --color-error: oklch(0.65 0.2 25);
  --color-info: oklch(0.65 0.15 250);
  --color-warning: oklch(0.7 0.2 85);

  /* Тёмная тема */
  @media (prefers-color-scheme: dark) {
    --color-cover: oklch(0.12 0.01 260);
    --color-font-primary: oklch(0.95 0 0);
    --color-cover-item: oklch(0.15 0.01 260);
    --color-border: oklch(0.3 0.01 260);
    --color-cover-hover: oklch(0.25 0.01 260);
    /* Акцентные цвета */
    --accent-color: var(--accent-yellow);
    --accent-hover-color: var(--accent-yellow-hover);
    /* серый  */
    --color-gray: oklch(0.35 0 0);
    /* Цвет поля заметок (немного светлее cover-item) */
    --color-notes: oklch(0.18 0.01 260);
    /* Состояния */
    --color-disabled: oklch(0.3 0 0);
    --color-success: oklch(0.76 0.25 145);
    --color-error: oklch(0.7 0.25 25);
    --color-info: oklch(0.76 0.2 250);
    --color-warning: oklch(0.85 0.25 85);
  }
  /*  Анимации */
  --main-animation-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  --main-animation-speed: 0.3s;
  --overshoot-animation-function: cubic-bezier(0.3, 1.5, 0.5, 1);
  --overshoot-animation-speed: 0.4s;
  --overshoot-animation-function: cubic-bezier(0.68, -0.7, 0.32, 1.59);
  --overshoot-animation-speed-n: 0.4s;
  --animation-size: cubic-bezier(
    0.2,
    0,
    0.2,
    1
  ); /*  анимация для формы создания list_item */
  @media (prefers-reduced-motion: reduce) {
    --main-animation-speed: 0.01ms;
    --overshoot-animation-speed: 0.01ms;
    --overshoot-animation-speed-n: 0.01ms;
  }
}

/* Общий сброс стилей для всех элементов 12 */
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: inherit; /* Наследуем box-sizing от родителя */
}

/* Сброс box-sizing для псевдоэлементов */
*::before,
*::after {
  box-sizing: inherit;
}

/* Основные стили для html */
html {
  font-family: var(--font-base);
  font-display: swap;
  font-size: var(--base_size); /* Базовый размер шрифта для rem */
  font-optical-sizing: auto;
  line-height: 1.5;
  box-sizing: border-box; /* Изменение модели box-sizing */
  -webkit-font-smoothing: antialiased; /* Сглаживание шрифтов */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
  text-size-adjust: none; /* Запрет авто-масштабирования текста */
  -webkit-text-size-adjust: none;
  /* Скрытие скроллбара на узких экранах */
  @media screen and (max-width: 1200px) {
    scrollbar-width: none;
  }
}

/* Светлая тема */
html[data-theme="light"] {
  --color-cover: oklch(0.95 0 0);
  --color-font-primary: oklch(0.12 0.01 260);
  --color-cover-item: oklch(0.97 0.01 260);
  --color-border: oklch(0.85 0.01 260);
  --color-cover-hover: oklch(0.9 0.01 260);
  /* Акцентные цвета */
  --accent-color: var(--accent-blue);
  --accent--color-hover: var(--accent-blue-hover);
  --accent-color-font: oklch(1 0 0);
  /* серый*/
  --color-gray: oklch(0.76 0 0);
  --color-gray-font: oklch(0.71 0 0);
  /* Цвет поля заметок  */
  --color-notes: oklch(94.247% 0.01341 167.611 / 0.4);
  /* Состояния */
  --color-disabled: oklch(0.85 0 0);
  --color-success: oklch(0.65 0.2 145);
  --color-error: oklch(0.65 0.2 25);
  --color-info: oklch(0.65 0.15 250);
  --color-warning: oklch(0.7 0.2 85);
  [class^="icon_wrap"][class*="inv_color"] {
    --color-cover: oklch(0.12 0.01 260);
    --color-font-primary: oklch(0.95 0 0);
  }
}

/* Тёмная тема */
html[data-theme="dark"] {
  --color-cover: oklch(0.12 0.01 260);
  --color-font-primary: oklch(0.95 0 0);
  --color-cover-item: oklch(0.15 0.01 260);
  --color-border: oklch(0.3 0.01 260);
  --color-cover-hover: oklch(0.25 0.01 260);
  /* Акцентные цвета */
  --accent-color: var(--accent-yellow);
  --accent-hover-color: var(--accent-yellow-hover);
  /* серый  */
  --color-gray: oklch(0.35 0 0);
  --color-gray-font: oklch(0.76 0 0);
  --accent-color-font: oklch(0.12 0.01 260);
  /* Цвет поля заметок (немного светлее cover-item) */
  --color-notes: oklch(0.18 0.01 260);
  /* Состояния */
  --color-disabled: oklch(0.3 0 0);
  --color-success: oklch(0.76 0.25 145);
  --color-error: oklch(0.7 0.25 25);
  --color-info: oklch(0.76 0.2 250);
  --color-warning: oklch(0.85 0.25 85);
  [class^="icon_wrap"][class*="inv_color"] {
    --color-cover: oklch(0.95 0 0);
    --color-font-primary: oklch(0.12 0.01 260);
  }
}
#theme_toggle {
  position: fixed;
  inset: 1rem auto auto 1rem;
  background: #4caf50;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
  &:hover {
    background: #45a049;
  }
}
/* Стили для html и body */
html,
body {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth; /* Плавная прокрутка */
  color: var(--main-font-c);
}

/* Современный подход */
body {
  @supports (padding-top: env(safe-area-inset-top)) {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  @supports (padding-top: constant(safe-area-inset-top)) {
    /* Для ранних iOS */
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right)
      constant(safe-area-inset-bottom) constant(safe-area-inset-left);
  }
  /* Оптимизация рендеринга для мобильных */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Стили для абзацев */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
p {
  text-wrap: pretty; /* Улучшенное перенос текста */
}

/* Основная обертка приложения */
.wrap {
  margin: auto;
  width: 100%;
  max-width: 2048px;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #eaeaea;
}

/* Обертка списка задач */
.todo_list_wrap {
  margin: auto;
  width: var(--content-wrap);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background-color: var(--color-cover);
  color: var(--color-font-primary);
  @media screen and (min-width: 500px) {
    --content-wrap: 36rem;
  }
  &:has(.nav_wrap.btm) {
    & .list_form_create_btn {
      inset: auto
        calc(((100dvw / 2) - (var(--content-wrap) / 2)) + var(--margin-w-m))
        calc(var(--margin-h-m) + var(--item-h)) auto;
    }
    & .list_item_form_wrap {
      & .list_item_form {
        inset: auto
          calc(((100dvw / 2) - (var(--content-wrap) / 2)) + var(--margin-w-m))
          calc(var(--margin-h-m) + var(--item-h)) auto;
      }
      &.open_form {
        .list_item_form {
          inset: auto calc(((100dvw / 2) - (var(--content-wrap) / 2))) 0 auto;
        }
      }
    }
  }
}

/* Обертка элементов списка */
.list_items_wrap {
  height: calc(100dvh - var(--item-h));
  border: 1px solid var(--color-border);
  transition: scale var(--main-animation-speed) var(--main-animation-function);
  &.main_menu_open {
    transform-origin: center right;
    scale: 0.99;
  }
  & .list_items {
    width: 100%;
    height: 100%;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
    /* contain: content; */
  }
}

/* Стили для отдельного элемента списка */
.list_item {
  margin: auto;
  width: 100%;
  min-height: var(--item-h);
  max-height: fit-content;
  position: relative;
  touch-action: pan-x; /* Ограничение touch-событий для горизонтального скролла */
  /* will-change: transform, opacity; */
  backface-visibility: hidden;
  cursor: pointer;
  &.open {
    cursor: default;
  }
  .item_sections_wrap {
    width: 100%;
    min-height: 100%;
    max-height: var(--item-h);
    overflow: hidden;
    background-color: var(--color-cover-item);
    color: var(--color-font-primary);
    border-bottom: 1px solid var(--color-border);
    interpolate-size: allow-keywords;
    transition: max-height var(--main-animation-speed)
      var(--main-animation-function);
    will-change: max-height;
  }
  /* Состояние открытого элемента */
  &.open {
    & .item_sections_wrap {
      max-height: fit-content;
      & .section_label {
        & .section_center_wrap {
          & .main_details_wrap {
            scale: 0 1;
            transition-delay: 0s;
          }
          & .item_icons_menu_wrap {
            max-width: fit-content;
            transition-delay: 0s;
            & div[class^="icon_wrap"] {
              /* Анимация появления иконок с последовательной задержкой */
              &:nth-child(1) {
                translate: 0 0;
                transition-delay: 0.1s;
              }
              &:nth-child(2) {
                translate: 0 0;
                transition-delay: 0.2s;
              }
              &:nth-child(3) {
                translate: 0 0;
                transition-delay: 0.3s;
              }
            }
          }
        }
      }
    }
  }
  & .section_notes {
    margin-inline: var(--margin-w-m);
    width: calc(100% - (var(--margin-w-m) * 2));
  }
}
/* Основная секция */
.section_label {
  display: flex;
  width: 100%;
  height: var(--item-h);
  justify-content: space-between;
  align-items: center;
  column-gap: var(--padding-w-m);
  /* Общие стили для левой и правой частей секции */
  & :where(.section_left_wrap, .section_right_wrap) {
    flex-shrink: 0;
    overflow: hidden;
  }
}
/* Левая часть секции */
.section_left_wrap {
  width: 0;
}
/* Правая часть секции */
.section_right_wrap {
  width: 0;
}
/* Центральная часть секции */
.section_center_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--margin-w-m);
  position: relative;
  overflow: hidden;
  /* Заголовок ценральной части секции */
  .item_caption_wrap {
    padding: var(--padding-h-m) var(--padding-w-m);
    min-width: 0;
    height: 100%;
    flex: 1 1 auto;
    align-content: center;
    overflow: hidden;
    border: var(--outline);
    & .item_caption {
      font-size: var(--h-font);
      line-height: var(--h-line-height);
      white-space: nowrap;
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
  }
  /* Основные детали в центральной части секции параметров list item  */
  .main_details_wrap {
    padding: var(--padding-h-m) var(--padding-w-m);
    width: min-content;
    max-width: calc((var(--padding-w-m) * 2) + (var(--item-w-m) * 3));
    height: 100%;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    border: var(--outline);
    transform-origin: left center;
    interpolate-size: allow-keywords;
    transition: scale var(--main-animation-speed) var(--main-animation-function);
    transition-delay: 0.2s;
    will-change: scale;
    /* Общие стили для интервала и иконок деталей */
    & :where(.item_interaval_wrap, .item_details_icons_wrap) {
      width: 100%;
      height: calc(var(--item-h-m) / 2);
    }
    /* Интервал цетральной секции list item */
    .item_interaval_wrap {
      align-content: center;
      overflow: hidden;
      border: var(--outline);
      & .item_interval {
        font-size: var(--p-font);
        line-height: var(--p-line-height);
        white-space: nowrap;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    /* Иконки цетральной секции list item */
    .item_details_icons_wrap {
      display: none;
      border: var(--outline);
      & div[class^="icon_wrap"] {
        height: 100%;
        aspect-ratio: 1 / 1;
      }
    }
  }
  /*  Меню иконок центральной секции list item */
  .item_icons_menu_wrap {
    min-width: 0;
    max-width: 0;
    height: var(--item-h);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    column-gap: var(--margin-w-s);
    position: absolute;
    inset: auto 0 auto auto;
    overflow: hidden;
    border: var(--outline);
    background-color: inherit;
    interpolate-size: allow-keywords;
    transition: max-width var(--main-animation-speed)
      var(--main-animation-function);
    transition-delay: 0.2s;
    will-change: max-width;
    /* Иконки меню анимация */
    & div[class^="icon_wrap"] {
      transition: translate var(--main-animation-speed)
        var(--main-animation-function);
      will-change: translate;
      &:nth-child(1) {
        translate: calc(300% + (var(--margin-w-m) * 2)) 0;
        transition-delay: 0.2s;
      }
      &:nth-child(2) {
        translate: calc(200% + (var(--margin-w-m) * 2)) 0;
        transition-delay: 0.1s;
      }
      &:nth-child(3) {
        translate: calc(100% + var(--margin-w-m)) 0;
        transition-delay: 0s;
      }
    }
  }
}
/* Секция заметок */
.section_notes {
  margin-bottom: var(--margin-h-m);
  width: 100%;
  min-height: var(--item-h-m);
  max-height: var(--item-h-m);
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background-color: var(--color-notes);
  border-radius: var(--radius-m);
  border: var(--outline);
  color: var(--color-font-primary);
  interpolate-size: allow-keywords;
  transition: max-height var(--main-animation-speed)
    var(--main-animation-function);
  will-change: max-height;
  /* Состояние редактирования заметок */
  &.open {
    max-height: fit-content;
    & div[class^="icon_wrap"] {
      & div[class^="icon_arrow"][class*="bottom"][class*="rotate"] {
        rotate: x 180deg;
      }
    }
  }
  &:has(.notes_content_wrap.edit) {
    & .controls_btn_wrap {
      height: var(--item-h-s);
    }
  }
  &:not(:has(.notes_content_wrap.edit)) {
    .notes_content {
      padding-bottom: var(--padding-h-m);
    }
  }
  & .controls_btn_wrap {
    padding: 0 var(--padding-w-s) var(--padding-h-s);
    height: 0;
    transition: height var(--main-animation-speed)
      var(--main-animation-function);
    will-change: height;
  }
  /* Переключатель отображения заметок */
  .notes_switch {
    padding-inline: var(--padding-w-m);
    width: 100%;
    height: var(--item-h-m);
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--paddin-w-m);
    cursor: pointer;
    /* Заголовок заметок */
    .notes_caption_wrap {
      width: 100%;
      height: 100%;
      align-content: center;
      border: var(--outline);
      & .notes_caption {
        font-size: var(--h-font-m);
        line-height: var(--h-line-height-m);
        border: var(--outline);
      }
    }
  }
  /* Контент заметок */
  .notes_content_wrap {
    padding: var(--padding-h-m) var(--padding-w-m);
    width: 100%;
    min-height: 0;
    max-height: calc(
      100dvh -
        ((var(--padding-h-m) * 2) + (var(--item-h) * 3) + var(--item-h-m) + 3px)
    );
    border: var(--outline);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE и Edge */
    &::-webkit-scrollbar {
      display: none;
    }
    & .notes_content {
      align-content: center;
      font-size: var(--p-font);
      line-height: var(--p-line-height);
    }
  }
}

/* Класс для скрытия элементов */
.hidden {
  width: 0;
  height: 0;
  position: absolute;
  display: none;
}

/* Кнопки управления */
.controls_btn_wrap {
  margin: 0 auto;
  width: 100%;
  height: var(--item-h-s);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: var(--outline);
  .btn_cancel,
  .btn_save {
    height: 100%;
    aspect-ratio: 1;
    align-content: center;
    border: var(--outline);
    background-color: inherit;
    user-select: none;
    cursor: pointer;
    & div[class^="icon_wrap"] {
      margin: auto;
    }
  }
}
.btn_cancel {
  & .form_btn {
    background-color: var(--color-disabled);
  }
}
.btn_save {
  & .form_btn {
    background-color: var(--accent-color);
  }
}
.form_btn {
  padding: 1.5rem 3rem;
  width: fit-content;
  border-radius: 100vmax;
  font-size: 1.7rem;
  line-height: 1;
  background-color: var(--color-gray);
  color: var(--accent-color-font);
}
/* форма для создания задач */
.list_item_form_wrap {
  &.open_form {
    .list_form_create_btn {
      scale: 0;
      transition-delay: 0.1s, 0s;
    }
    .list_item_form {
      width: var(--content-wrap);
      height: 100dvh;
      border-radius: 0;
      inset: auto calc(((100dvw / 2) - (var(--content-wrap) / 2))) 0 auto;
      scale: 1;
      transition-duration: 0.1s, 0.5s, 0.5s, 0.3s, 0.5s;
      transition-timing-function: ease-in, var(--animation-size),
        var(--animation-size), var(--animation-size), var(--animation-size);
      transition-delay: 0s, 0.15s, 0.15s, 0.3s, 0.15s;
      & > :where(.form_header, .form_body, .controls_btn_wrap) {
        opacity: 1;
        transition: opacity 0.3s var(--animation-size);
        transition-delay: 0.3s;
      }
    }
  }
}
.list_item_form {
  margin: auto;
  padding: var(--padding-h-m) var(--padding-w-m);
  width: var(--icon-size);
  height: var(--icon-size);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: var(--margin-h-m);
  position: fixed;
  inset: auto
    calc(((100dvw / 2) - (var(--content-wrap) / 2)) + var(--margin-w-m))
    var(--margin-h-m) auto;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--color-cover-item);
  scale: 0;
  transform-origin: center center;
  transition-property: scale, width, height, border-radius, inset;
  transition-duration: 0.1s, 0.3s, 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease-out, var(--animation-size),
    var(--animation-size), var(--animation-size), var(--animation-size);
  transition-delay: 0.3s, 0s, 0s, 0s, 0s;
  transform: translateZ(0);
  will-change: scale, width, height, border-radius, inset;
  z-index: 1;
  &:has(.controls_btn_wrap) {
    justify-content: space-between;
  }
  & > :where(.form_header, .form_body, .controls_btn_wrap) {
    opacity: 0;
    transition: opacity 0.1s var(--animation-size);
    will-change: opacity;
  }
  & .form_header {
    & .form_caption_wrap {
      padding: var(--padding-h-m) var(--padding-w-m);
      width: 100%;
      height: var(--item-h-s);
      align-content: center;
      text-align: center;
      & .form_caption {
        font-size: var(--h-font-m);
        line-height: var(--h-line-height-m);
      }
    }
  }
  & .form_body {
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: var(--margin-h-s);
    flex-grow: 1;
    position: relative;
    border: var(--outline);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE и Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  & .controls_btn_wrap:has(.form_btn) {
    margin-bottom: var(--margin-h-m);
    height: var(--item-h-m);
  }
}
.list_item_caption_form {
  padding-inline: var(--padding-w-m);
  width: 100%;
  height: var(--item-h-m);
  border-radius: var(--radius-m);
  font-size: var(--h-font-m);
  line-height: var(--h-line-height-m);
  background-color: inherit;
}
.list_form_create_btn {
  margin: auto;
  width: fit-content;
  height: fit-content;
  border-radius: 50%;
  position: fixed;
  inset: auto
    calc(((100dvw / 2) - (var(--content-wrap) / 2)) + var(--margin-w-m))
    var(--margin-h-m) auto;
  background-color: var(--accent-color);
  z-index: 1;
  cursor: pointer;
  transition: scale 0s,
    transform var(--main-animation-speed) var(--main-animation-function);
  &.main_menu_open {
    transform-origin: center right;
    transform: scale(0.94);
  }
}
/* Модальное окно */
.modal_wrap {
  margin: auto;
  width: 0;
  height: 0;
  inset: 0;
  position: fixed;
  overflow: hidden;
  z-index: 1;
  transition: width 0s, height 0s;
  transition-delay: var(--main-animation-speed);
  contain: strict;
  /* Модальное окно активно */
  &.modal_open {
    width: 100%;
    height: 100%;
    transition-delay: 0s;
    &::before {
      opacity: 1;
      transition-delay: 0s;
    }
    & .modal_content_wrap {
      translate: 0;
      opacity: 1;
    }
  }
  &::before {
    content: "";
    margin: auto;
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    inset: 0;
    background-color: rgba(50, 50, 50, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--main-animation-speed) ease;
  }
  .modal_content_wrap {
    margin: auto;
    padding: var(--padding-h-m) var(--padding-w-m);
    width: calc(var(--content-wrap) - (var(--margin-w-m) * 4));
    min-height: fit-content;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: var(--margin-h-m);
    position: absolute;
    inset: 0;
    border-radius: max(0.4rem, min(1.6rem, 10%));
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--color-cover-item);
    color: var(--color-font-primary);
    translate: 0 round(up, 100%, 1px);
    transform: translateZ(0);
    opacity: 0;
    transition: translate var(--main-animation-speed)
        var(--main-animation-function),
      opacity var(--main-animation-speed) var(--main-animation-function);
    will-change: translate, opacity;
    .modal_header {
      width: 100%;
      height: var(--item-h-s);
      .modal_caption_wrap {
        padding-inline: var(--padding-w-m);
        width: 100%;
        height: var(--item-h-s);
        align-content: center;
        text-align: center;
        border: var(--outline);
        .modal_caption {
          width: 100;
          font-size: var(--h-font-m);
          line-height: var(--h-line-height-m);
          text-wrap: nowrap;
          white-space: nowrap;
          border: var(--outline);
        }
      }
    }
    .modal_body {
      width: 100%;
      max-height: calc(100dvh - (var(--item-h) * 2));
      display: flex;
      flex-direction: column;
      row-gap: var(--margin-h-s);
      flex-grow: 1;
      position: relative;
      font-size: var(--p-font-m);
      line-height: var(--p-line-height-m);
      border: var(--outline);
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE и Edge */
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
/* заголовок раздела опции */
.section_caption_wrap {
  margin: 0 auto calc((var(--margin-h-xl) * -1) - 1px);
  padding: var(--padding-h-m) var(--padding-w-m);
  width: 100%;
  & .section_caption {
    font-size: var(--h-font-s);
    line-height: var(--h-line-height-s);
  }
}

/* контейнер раздела опции */
.options_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--margin-h-xl) + 1px);
  /* опции секции */
  .section_options {
    padding: var(--padding-h-s) 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--margin-h-s);
    position: relative;
    border-radius: var(--radius-m);
    background-color: var(--color-cover-hover);
    &:not(:last-child) {
      &:after {
        content: "";
        margin: auto;
        width: calc(100% - (var(--margin-w-m) * 2));
        height: 1px;
        position: absolute;
        inset: auto 0 0;
        translate: 0 calc(1px + (var(--margin-h-xl) / 2));
        background-color: var(--color-border);
      }
    }
    &:has(.list_item_caption_form) {
      padding-block: 0;
    }
    /* контейнер опции */
    .option_item_wrap {
      width: 100%;
      min-height: var(--item-h-m);
      display: flex;
      justify-content: space-between;
      align-items: center;
      column-gap: var(--margin-h-m);
      position: relative;
      border: var(--outline);
      interpolate-size: allow-keywords;
      transition: min-height var(--main-animation-speed)
        var(--main-animation-function);
      will-change: min-height;
      &.error {
        min-height: var(--item-h-m);
        &::after {
          content: "";
          margin: auto;
          width: calc(100% - calc(var(--padding-w-m) * 2));
          position: absolute;
          inset: auto 0 0;
          border-bottom: 1px solid var(--color-border);
        }
        & .option_caption_wrap {
          & .option_inf {
            max-height: fit-content;
            color: var(--color-error);
            opacity: 1;
          }
        }
      }
      &.disabled {
        & div[class^="icon_wrap"] {
          display: none;
        }
      }
      &:not(.disabled) {
        & .option_wrap:has(div[class^="icon_arrow"]) {
          left: var(--margin-w-m);
        }
      }
      &:has(div[class^="icon_arrow"]) {
        cursor: pointer;
        &:hover {
          & div[class^="icon_arrow"][class*="bottom"][class*="move"] {
            translate: 0 0.3rem;
          }
          & div[class^="icon_arrow"][class*="top"][class*="move"] {
            translate: 0 -0.3rem;
          }
          & div[class^="icon_arrow"][class*="left"][class*="move"] {
            translate: -0.3rem 0;
          }
          & div[class^="icon_arrow"][class*="right"][class*="move"] {
            translate: 0.3rem 0;
          }
        }
      }
      &:has(div[class^="icon_wrap"][class*="animate"]) {
        cursor: pointer;
        &:hover {
          & div[class^="icon_create"] {
            & .icon_item {
              rotate: 90deg;
            }
          }
        }
      }
      /* название опции */
      .option_caption_wrap {
        padding-inline: var(--padding-w-m);
        border: var(--outline);
        .option_caption {
          font-size: var(--h-font-m);
          line-height: var(--h-line-height-m);
        }
        .option_inf {
          margin-top: var(--margin-h-s);
          max-width: 100%;
          max-height: 0;
          overflow: hidden;
          font-size: var(--p-font-m);
          line-height: var(--p-line-height-m);
          opacity: 0;
          transition: opacity var(--main-animation-speed)
            var(--main-animation-function);
        }
      }
      /* значение опции */
      .option_wrap {
        padding-inline: var(--padding-w-m);
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        position: relative;
        border: var(--outline);
        & .option {
          font-size: var(--p-font);
          line-height: var(--p-line-height);
          color: var(--color-gray-font);
        }
        & div[class^="icon_wrap"] {
          & > div[class^="icon_arrow"] {
            & .icon_item {
              &::before,
              &::after {
                background-color: var(--color-gray-font);
              }
            }
          }
        }
        & div[class^="icon_wrap"]:has(div[class*="icon_create"]) {
          background-color: var(--color-cover);
        }
      }
    }
  }
}

/* Стили для списка */
.select_wrap {
  width: 100%;
  height: fit-content;
  .select {
    width: 100%;
    min-height: var(--item-h-s);
    max-height: var(--item-h-m);
    position: relative;
    overflow: hidden;
    interpolate-size: allow-keywords;
    transition: max-height var(--main-animation-speed) linear;
    will-change: max-height;
    cursor: pointer;
    &.select_open {
      max-height: fit-content;
      & .select_option_wrap {
        transition-duration: 0.1s;
        transition-delay: 0s;
        &.item_select {
          border-radius: var(--radius-m) var(--radius-m) 0 0;
          & div[class^="icon_wrap"] {
            & div[class^="icon_arrow"][class*="bottom"][class*="rotate"] {
              rotate: x 180deg;
            }
          }
        }
        &:last-child {
          border-radius: 0 0 var(--radius-m) var(--radius-m);
        }
      }
    }
    /* контейнер опций списка */
    .select_option_wrap {
      padding-inline: var(--padding-w-m);
      width: 100%;
      height: var(--item-h-m);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--main-background-c);
      color: var(--main-font-c);
      transition: border-radius var(--main-animation-speed)
        var(--main-animation-function);
      transition-delay: 0.25s;
      /* контейнер выбранного элемента списка */
      &.item_select {
        border-radius: var(--radius-m);
        &:has(.option_caption) {
          height: var(--item-h-m);
        }
      }
      /* элементы списка */
      .option_cover {
        width: 100%;
        height: 100%;
        align-content: center;
      }
      .option_caption {
        padding-inline: 0 var(--padding-w-m);
        font-size: var(--p-font-s);
        line-height: var(--p-line-height-s);
      }
      .option_name {
        padding-inline: 0 var(--padding-w-m);
        font-size: var(--h-font-m);
        line-height: var(--h-line-heim);
      }
    }
  }
}
:where(.color_peach, .color_light_blue, .color_green) {
  --main-font-c: lch(
    from var(--main-background-c) calc((49.44 - l) * infinity) 0 0
  );
}
.color_peach {
  --main-background-c: var(--pastel-peach);
}
.color_light_blue {
  --main-background-c: var(--pastel-light-blue);
}
.color_green {
  --main-background-c: var(--pastel-green);
}

/* Стили для модального меню */
.menu_modal_wrap {
  margin: auto;
  width: 0;
  height: 0;
  inset: 0;
  position: fixed;
  overflow: hidden;
  z-index: 1;
  transition: width 0s, height 0s;
  transition-delay: var(--main-animation-speed);
  contain: strict;
  &::before {
    content: "";
    margin: auto;
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    inset: 0;
    background-color: rgba(50, 50, 50, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--main-animation-speed) ease;
  }
  /* Состояние при открытии */
  &.active {
    width: 100%;
    height: 100%;
    transition-delay: 0s;
    &::before {
      opacity: 1;
      transition-delay: 0s;
    }
    & .menu_modal {
      opacity: 1;
      translate: 0 1rem;
    }
  }
}

.menu_modal {
  padding: var(--padding-h-s) var(--padding-w-s);
  width: fit-content;
  height: fit-content;
  position: fixed;
  border-radius: 1rem;
  list-style: none;
  background-color: var(--color-cover-item);
  color: var(--color-font-primary);
  translate: 0 -1rem;
  opacity: 0;
  transition: translate var(--main-animation-speed)
      var(--main-animation-function),
    opacity var(--main-animation-speed) var(--main-animation-function);
  will-change: translate, opacity;
}

.menu_modal_item {
  padding-inline: var(--padding-w-m);
  height: var(--item-h-s);
  align-content: center;
  border-radius: calc(1rem - var(--padding-h-s));
  font-size: var(--p-font-m);
  line-height: var(--p-line-height-m);
  white-space: nowrap;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--main-animation-speed)
    var(--main-animation-function);
  cursor: pointer;
  &:hover {
    background-color: var(--color-cover-hover);
  }
}

/* Стили для формы интервала */

.section_interval_wrap {
  margin: auto;
  width: calc(var(--margin-w-m) + (var(--item-w-m) * 2));
  height: 15rem;
  position: relative;
  overflow: hidden;
  .interval_form {
    margin: auto;
    padding-block: var(--padding-h-m);
    width: var(--item-w-m);
    height: 18rem;
    position: absolute;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    cursor: pointer;
    z-index: 1;
    &:first-of-type {
      inset: 0 auto 0 0;
    }
    &:last-of-type {
      inset: 0 0 0 auto;
    }
    .interval {
      margin-block: auto;
      width: 100%;
      height: var(--item-h-s);
      position: absolute;
      inset: 0 auto;
      align-content: center;
      font-size: var(--h-font-xxl);
      font-variant-numeric: tabular-nums;
      letter-spacing: var(--margin-w-s);
      line-height: 1;
      text-align: center;
      color: var(--color-font-primary);
      transition: translate var(--duration, 350ms)
          cubic-bezier(0.25, 0.8, 0.5, 1),
        scale var(--duration, 350ms) cubic-bezier(0.25, 0.8, 0.5, 1),
        opacity calc(var(--duration, 350ms) * 0.7) ease-out;
      transition-behavior: allow-discrete;
      transform-style: preserve-3d;
      -webkit-user-drag: none;
      backface-visibility: hidden;
      will-change: translate, scale, opacity;
      pointer-events: none;
      opacity: 1;
      &.is_prev_hidden {
        translate: 0 -167%;
      }
      &.is_prev {
        translate: 0 -100%;
      }
      &.is_next {
        translate: 0 100%;
      }
      &.is_next_hidden {
        translate: 0 167%;
      }
      &:where(.is_prev, .is_next) {
        scale: 0.6;
      }
      &:where(.is_prev_hidden, .is_next_hidden) {
        opacity: 0;
        scale: 0.3;
      }
    }
  }
}

/* Навигация */

.nav_wrap {
  padding-inline: var(--padding-w-m);
  width: 100%;
  min-height: var(--item-h);
  max-height: var(--item-h-xxl);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-top: 0;
  transition: scale var(--main-animation-speed) var(--main-animation-function);
  &.top {
    transform-origin: bottom right;
  }
  &.btm {
    order: 1;
    transform-origin: top right;
    & .display_mode_item {
      &::after {
        inset: 0 0 auto;
      }
    }
  }
  &.main_menu_open {
    scale: 0.9;
  }
  .nav {
    width: 100%;
    height: var(--item-h-m);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    .nav_item_wrap {
    }
  }
}

/* Главное меню */

.main_menu_wrap {
  margin: auto;
  & .menu_wrap_overlay {
    content: "";
    margin: auto;
    width: 0;
    height: 0;
    overflow: hidden;
    position: fixed;
    inset: 0;
    background-color: rgba(50, 50, 50, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--main-animation-speed) ease, width 0s, height 0s;
    will-change: opacity;
    transition-delay: 0s, var(--main-animation-speed),
      var(--main-animation-speed);
    z-index: 3;
  }
  &.main_menu_open {
    & .menu_wrap_overlay {
      width: 100%;
      height: 100%;
      opacity: 1;
      transition-delay: 0s;
    }
    .main_menu {
      translate: 0 0;
    }
  }
  .main_menu {
    margin: auto;
    padding-inline: var(--padding-w-m);
    width: calc(100% - var(--item-w));
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: var(--margin-h-m);
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 3;
    background-color: var(--color-cover);
    border-right: 1px solid var(--color-border);
    translate: -100% 0;
    transition: translate var(--main-animation-speed)
      var(--main-animation-function);
    will-change: translate;
  }
}
.menu_header {
  padding-inline: var(--padding-w-m);
  height: var(--item-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo_wrap {
  .logo {
    padding: 0.5rem;
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    row-gap: 0.1rem;
    column-gap: 0.5rem;
    border-radius: var(--radius-s);
    user-select: none;
    .logo_items {
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .logo_item {
        font-size: 1.8rem;
        line-height: 1cap;
        text-align: center;
        color: var(--color-font-primary);
      }
    }
  }
}
.menu_body {
  .menu_items {
    padding-inline: var(--padding-w-m);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    row-gap: var(--margin-h-s);
    list-style: none;
    .menu_item_wrap {
      width: 100%;
      height: var(--item-h-s);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .menu_item {
        font-size: var(--p-font);
        line-height: 1;
        cursor: pointer;
      }
    }
  }
}

/* Отображение перключателей */

.display_mode {
  padding-inline: var(--padding-w-m);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  .display_mode_item {
    width: 50%;
    padding-inline: var(--padding-w-m);
    height: var(--item-h-s);
    position: relative;
    align-content: center;
    text-align: center;
    cursor: pointer;
    &:hover {
      &::after {
        scale: 1;
      }
    }
    &::after {
      content: "";
      width: 100%;
      height: 0.3rem;
      position: absolute;
      inset: auto 0 0;
      background-color: var(--color-font-primary);
      scale: 0 1;
      transition: scale var(--main-animation-speed)
        var(--main-animation-function);
      will-change: scale;
    }
    &.active {
      &::after {
        scale: 1;
      }
    }
    .display_mode_caption {
      margin-inline: auto;
      width: fit-content;
      height: 100%;
      align-content: center;
      font-size: var(--h-font-m);
      line-height: 1;
    }
  }
}

.nav_toogle_wrap {
  width: 100%;
  height: 2rem;
  align-content: center;
  overflow: hidden;
}
.nav_toogle_btn {
  margin: auto;
  width: var(--item-w-m);
  height: 0.3rem;
  border-radius: 100vmax;
  background-color: var(--color-font-primary);
}