.Calendar {
  background: var(--color-background-surface-highest-default);
  box-shadow: var(--shadow-m);
  border-radius: var(--border-radius-xs);
  inline-size: var(--calendar-body-inline-size);
}

  .Calendar-BaseContainer {
    display: flex;
    flex-direction: column;
  }

  .Calendar-Header {
    display: flex;
    justify-content: space-between;
    padding: 18px var(--calendar-header-inline-padding);
  }

  .Calendar-HeaderContainer {
    display: flex;
    justify-content: space-between;
    min-inline-size: calc(
      var(--calendar-body-inline-size) - 2 *
        var(--calendar-header-inline-padding)
    );
  }

  .Calendar-HeaderElement {
    display: flex;
  }

  .Calendar-HeaderElement_data {
      gap: var(--spacing-2x);
    }

  .Calendar-HeaderElement_buttons {
      direction: ltr;
      gap: 18px;
    }

  .Calendar-HeaderButton {
    --calendar-text-header-color: var(--color-content-accent-default);
    display: flex;
    min-block-size: var(--calendar-button-height);
    align-items: center;
    background: transparent;
    border: none;
    padding-inline: 0;
    border-radius: var(--border-radius-xs);
    cursor: pointer;
    color: var(--calendar-text-header-color);
    transition: var(--transition-default) box-shadow;
  }

  .Calendar-HeaderButton_hidden {
      visibility: hidden;
    }

  .Calendar-HeaderButton:disabled {
      --calendar-text-header-color: var(--color-content-base-disabled);
    }

  .Calendar-HeaderButton:focus-visible {
      outline: 0;
      box-shadow: var(--shadow-outline-focused);
    }

  .Calendar-Body {
    display: grid;
    align-items: stretch;
    block-size: var(--calendar-body-block-size);
    min-inline-size: var(--calendar-body-inline-size);
    padding: var(--spacing-2x);
    box-sizing: border-box;
    row-gap: 2px;
  }

  .Calendar-Body_base {
      grid-template-columns: repeat(7, 1fr);
      -webkit-padding-before: 0;
              padding-block-start: 0;
    }

  .Calendar-Body_select {
      grid-template-columns: repeat(3, 1fr);
      -webkit-padding-before: var(--spacing-2x);
              padding-block-start: var(--spacing-2x);
      gap: 2px;
    }

  .Calendar-DateItem {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .Calendar-DateItem_day {
      block-size: var(--calendar-item-size);
      inline-size: var(--calendar-item-size);
      border-radius: var(--border-radius-xs);
    }

  .Calendar-DateItem_month {
      inline-size: 100%;
      text-align: center;
      border-radius: var(--border-radius-xs);
    }

  .Calendar-DateButton {
    --calendar-bg-date-color: none;
    position: relative;
    padding: 0;
    background: var(--calendar-bg-date-color);
    border: none;
    cursor: pointer;
    will-change: box-shadow, background;
    transition: background var(--transition-default);
  }

  .Calendar-DateButton:hover:not(
        .Calendar-DateButton_selected,
        .Calendar-DateButton_rangeSelected,
        .Calendar-DateButton_disabled,
        .Calendar-DateButton_rangeSupposed
      ) {
      --calendar-bg-date-color: var(--color-background-base-main-hover);
    }

  .Calendar-DateButton:focus-visible {
      outline: 0;
      box-shadow: var(--shadow-outline-focused);
      z-index: 2;
    }

  /* Увеличиваем область кнопки на 1px, чтобы компенсировать gap */

  .Calendar-DateButton::before {
      content: '';
      position: absolute;
      inset: -1px;
    }

  .Calendar-DateButton_disabled {
      cursor: not-allowed;
    }

  .Calendar-DateButton_selected {
      --calendar-bg-date-color: var(--color-background-accent-default);
    }

  .Calendar-DateButton_rangeSelected {
      --calendar-bg-date-color: var(--color-background-accent-light);
      border-radius: 0;
    }

  .Calendar-DateButton_rangeSupposed {
      --calendar-bg-date-color: var(--color-background-base-main-hover);
      border-radius: 0;
    }

  .Calendar-DateButton_rangeSupposedInSelected {
      --calendar-bg-date-color: var(--color-background-accent-light-hover);
    }

  .Calendar-DateButton_edgeLeft {
      border-radius: var(--border-radius-xs) 0 0 var(--border-radius-xs);
    }

  .Calendar-DateButton_edgeRight {
      border-radius: 0 var(--border-radius-xs) var(--border-radius-xs) 0;
    }

  .Calendar-DateButton_edgeLeftRight {
      border-radius: var(--border-radius-xs);
    }

  .Calendar-DateText_disabled {
      text-decoration: line-through;
    }

  .Calendar_size_s {
      --calendar-header-inline-padding: 16px;
      --calendar-item-size: 32px;
      --calendar-body-block-size: 244px;
      --calendar-body-inline-size: 240px;
      --calendar-button-height: 20px;
    }

  .Calendar_size_m {
      --calendar-header-inline-padding: 20px;
      --calendar-item-size: 40px;
      --calendar-body-block-size: 300px;
      --calendar-body-inline-size: 296px;
      --calendar-button-height: 28px;
    }

  .Calendar_size_l {
      --calendar-header-inline-padding: 24px;
      --calendar-item-size: 48px;
      --calendar-body-block-size: 356px;
      --calendar-body-inline-size: 352px;
      --calendar-button-height: 28px;
    }

  .Calendar_dateRangeHorizontal {
    display: flex;
    inline-size: calc(2 * var(--calendar-body-inline-size));
  }