.date-block {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.month-group {
  display: flex;
  flex-direction: column;
}

.month-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-ink-secondary);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.dates {
  display: flex;
  gap: 8px;
  overflow: hidden;
}

.date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: var(--transition-colors);
  border-radius: 16px;
}

.date:hover {
  background: var(--color-hover);
}

.date.active {
  background: #fff;
}

.date.active .day-name,
.date.active .day-num {
  color: var(--color-brand);
}

.date:hover .day-name,
.date:hover .day-num {
  color: var(--color-brand);
}

.day-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-ink-secondary);
  text-transform: uppercase;
}

.day-name.weekend {
  color: var(--color-danger);
}

.day-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: 4px;
}

.today-dot {
  width: 4px;
  height: 4px;
  background: var(--color-brand);
  border-radius: 50%;
}

.calendar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  flex-shrink: 0;
  background: transparent;
  box-sizing: border-box;
  cursor: pointer;
  transition: var(--transition-colors);
}

.calendar-btn:hover {
  background: var(--color-hover);
  border-color: transparent;
}

.calendar-btn:hover .material-symbols-rounded {
  color: var(--color-brand);
}

.calendar-btn .material-symbols-rounded {
  color: var(--color-ink);
  width: 20px;
  height: 20px;
}

/* Группа кнопки календаря тянется на высоту ленты, а кнопка — на высоту даты,
   как когда она стояла в одном ряду с датами. */
.calendar-group {
  align-self: stretch;
  /* Кнопка календаря — у правого края ленты: правая граница совпадает с
     переключателем вида ленты и концом контента, а не стоит сразу за датами. */
  margin-left: auto;
}

.calendar-group .dates {
  flex: 1;
}

.skeleton-month-title {
  width: 60px;
  height: 16px;
  background: var(--color-skeleton);
  border-radius: 100px;
  margin-bottom: 4px;
}

.skeleton-date {
  width: 50px;
  height: 60px;
  background: var(--color-skeleton);
  border-radius: 16px;
  flex-shrink: 0;
}

/* Лента дат на телефоне: две недели, листается пальцем от края до края экрана
   (сколько дней рисовать, решает desktop/js/dates.js). Закреплены название месяца —
   слева, пока его даты не ушли и не пришёл следующий, — и кнопка календаря справа. */
@media (max-width: 767px) {
  .date-block {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--space-mobile));
    padding-inline: var(--space-mobile) 0;
    scrollbar-width: none;
  }

  .date-block::-webkit-scrollbar {
    display: none;
  }

  .month-group,
  .dates,
  .date,
  .calendar-btn {
    flex-shrink: 0;
  }

  .dates {
    overflow: visible;
  }

  .month-title {
    position: sticky;
    left: 0; /* отсчёт — от поля ленты, то есть 20px от края экрана */
    align-self: flex-start;
  }

  /* Даты уезжают под кнопку: подложка цвета фона закрывает их от зазора
     перед кнопкой до края экрана. */
  .calendar-group {
    position: sticky;
    right: 0;
    z-index: 1;
    margin-left: auto;
    padding: 0 var(--space-mobile) 0 var(--space-2);
    background: var(--color-bg);
  }
}