@use "../../style/variables" as *;

.#{$prefix}-calendar {
  background: var(--ty-calendar-bg);
  border: 1px solid var(--ty-calendar-border);
  border-radius: var(--ty-calendar-radius);
  outline: none;

  &_fullscreen {
    width: 100%;
  }

  &_card {
    width: 300px;
  }

  // ── Header ──────────────────────────────────────────────────────────────

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ty-calendar-header-padding);
    border-bottom: 1px solid var(--ty-calendar-border);
  }

  &__header-nav {
    display: flex;
    align-items: center;
  }

  &__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ty-calendar-header-action-size);
    height: var(--ty-calendar-header-action-size);
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--ty-calendar-header-action-radius);
    font-size: var(--ty-calendar-header-action-font-size);
    color: var(--ty-calendar-header-action-color);
    transition:
      color 0.2s,
      background-color 0.2s,
      box-shadow 0.2s;

    &:hover:not(&_disabled) {
      color: var(--ty-calendar-header-action-color-hover);
      background: var(--ty-calendar-header-action-hover-bg);
    }

    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--ty-calendar-header-action-focus-ring);
    }

    &_disabled {
      cursor: not-allowed;
      opacity: 0.3;
    }
  }

  &__title {
    display: flex;
    align-items: center;
    gap: var(--ty-calendar-header-caption-gap);
    font-weight: var(--ty-calendar-header-label-font-weight);
    font-size: var(--ty-calendar-header-label-font-size);
  }

  &__title-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    min-height: var(--ty-calendar-header-label-min-height);
    padding: 0 var(--ty-calendar-header-label-padding-inline);
    font-weight: var(--ty-calendar-header-label-font-weight);
    font-size: inherit;
    font-family: inherit;
    line-height: 1;
    border-radius: var(--ty-calendar-header-label-radius);
    color: var(--ty-calendar-header-label-color);
    transition:
      color 0.2s,
      background-color 0.2s,
      box-shadow 0.2s;

    &:hover {
      color: var(--ty-calendar-header-label-color-hover);
      background: var(--ty-calendar-header-label-hover-bg);
    }

    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--ty-calendar-header-label-focus-ring);
    }
  }

  // ── Body & animation ────────────────────────────────────────────────────

  &__body {
    padding: var(--ty-calendar-body-padding);
  }

  // ── Table (month panel) ─────────────────────────────────────────────────

  &__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  &__cell-header {
    padding: var(--ty-calendar-cell-header-padding);
    text-align: center;
    font-weight: 500;
    font-size: var(--ty-calendar-cell-header-font-size);
    color: var(--ty-calendar-cell-header-color);
  }

  // ── Week number ─────────────────────────────────────────────────────────

  &__week-number-header {
    width: var(--ty-calendar-week-number-width);
    color: var(--ty-calendar-week-number-color);
    font-weight: 400;
    font-size: var(--ty-calendar-week-number-font-size);
  }

  &__week-number {
    text-align: center;
    font-size: var(--ty-calendar-week-number-font-size);
    color: var(--ty-calendar-week-number-color);
    padding: var(--ty-calendar-week-number-padding);
    user-select: none;
  }

  // ── Day cell ────────────────────────────────────────────────────────────

  &__cell {
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;

    &_disabled {
      cursor: not-allowed;
      color: var(--ty-calendar-cell-color-muted);

      .#{$prefix}-calendar__cell-inner {
        background: var(--ty-calendar-cell-disabled-bg);
      }

    }

    &:not(&_disabled):hover .#{$prefix}-calendar__cell-inner {
      background: var(--ty-calendar-cell-hover-bg);
    }

    &_selected:not(&_disabled):hover .#{$prefix}-calendar__cell-inner {
      background: var(--ty-calendar-cell-selected-bg);
    }

    &_in-view:not(&_disabled) {
      color: var(--ty-calendar-cell-color);
    }

    &:not(&_in-view) {
      color: var(--ty-calendar-cell-color-muted);

      .#{$prefix}-calendar__cell-dot {
        opacity: 0.4;
      }
    }

    &_today .#{$prefix}-calendar__cell-inner {
      border: 1px solid var(--ty-calendar-cell-today-border);
      color: var(--ty-calendar-cell-today-border);
    }

    &_selected .#{$prefix}-calendar__cell-inner {
      background: var(--ty-calendar-cell-selected-bg);
      color: var(--ty-calendar-cell-selected-color);
      border-radius: var(--ty-calendar-radius);
    }

    &_selected .#{$prefix}-calendar__cell-date {
      color: inherit;
    }

    // ── Range selection ─────────────────────────────────────────────────

    &_in-range {
      background: var(--ty-calendar-range-bg);
    }

    &_range-start {
      border-radius: var(--ty-calendar-radius) 0 0 var(--ty-calendar-radius);
      background: var(--ty-calendar-range-bg);
    }

    &_range-start .#{$prefix}-calendar__cell-inner {
      background: var(--ty-calendar-cell-selected-bg);
      color: var(--ty-calendar-cell-selected-color);
      border-radius: var(--ty-calendar-radius);
    }

    &_range-end {
      border-radius: 0 var(--ty-calendar-radius) var(--ty-calendar-radius) 0;
      background: var(--ty-calendar-range-bg);
    }

    &_range-end .#{$prefix}-calendar__cell-inner {
      background: var(--ty-calendar-cell-selected-bg);
      color: var(--ty-calendar-cell-selected-color);
      border-radius: var(--ty-calendar-radius);
    }

    &_range-start#{&}_range-end {
      border-radius: var(--ty-calendar-radius);
    }

    // ── Keyboard focus ──────────────────────────────────────────────────

    &_focused .#{$prefix}-calendar__cell-inner,
    &:focus-visible .#{$prefix}-calendar__cell-inner {
      outline: 2px solid var(--ty-calendar-cell-focus-outline);
      outline-offset: 1px;
    }
  }

  // ── Cell inner ──────────────────────────────────────────────────────────

  &__cell-inner {
    padding: var(--ty-calendar-cell-inner-padding);
    border-radius: var(--ty-calendar-radius);
    min-height: var(--ty-calendar-cell-inner-min-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  &_fullscreen &__cell-inner {
    min-height: var(--ty-calendar-cell-inner-min-height-fullscreen);
    padding: var(--ty-calendar-cell-inner-padding-fullscreen);
    align-items: stretch;
  }

  &__cell-date {
    display: inline-block;
    line-height: var(--ty-calendar-cell-date-line-height);
    min-width: var(--ty-calendar-cell-date-min-width);
    text-align: center;
    font-size: var(--ty-calendar-cell-date-font-size);
  }

  &__cell-content {
    font-size: var(--ty-calendar-cell-content-font-size);
    margin-top: var(--ty-calendar-cell-content-margin-top);
  }

  // ── Dot indicator ───────────────────────────────────────────────────────

  &__cell-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--ty-calendar-cell-dot-size);
    height: var(--ty-calendar-cell-dot-size);
    border-radius: 50%;
    background-color: var(--ty-calendar-cell-dot-color);
  }

  // ── Month panel (year mode) ─────────────────────────────────────────────

  &__months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ty-calendar-panel-grid-gap);
    padding: var(--ty-calendar-panel-padding);
  }

  &__month-cell {
    text-align: center;
    min-height: var(--ty-calendar-panel-item-min-height);
    padding: 16px var(--ty-calendar-panel-item-padding-inline);
    cursor: pointer;
    border-radius: var(--ty-calendar-panel-item-radius);
    transition: all 0.2s;

    &:hover {
      background: var(--ty-calendar-panel-item-hover-bg);
    }

    &_selected {
      background: var(--ty-calendar-panel-item-selected-bg);
      color: var(--ty-calendar-panel-item-selected-color);

      &:hover {
        background: var(--ty-calendar-panel-item-selected-hover-bg);
      }
    }
  }

  &__month-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__month-content {
    font-size: var(--ty-calendar-month-content-font-size);
    margin-top: var(--ty-calendar-month-content-margin-top);
  }

  // ── Decade panel ────────────────────────────────────────────────────────

  &__decades {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ty-calendar-panel-grid-gap);
    padding: var(--ty-calendar-panel-padding);
  }

  &__decade-cell {
    text-align: center;
    min-height: var(--ty-calendar-panel-item-min-height);
    padding: 16px var(--ty-calendar-panel-item-padding-inline);
    cursor: pointer;
    border-radius: var(--ty-calendar-panel-item-radius);
    transition: all 0.2s;
    font-size: var(--ty-calendar-decade-font-size);

    &:hover {
      background: var(--ty-calendar-panel-item-hover-bg);
    }

    &_selected {
      background: var(--ty-calendar-panel-item-selected-bg);
      color: var(--ty-calendar-panel-item-selected-color);

      &:hover {
        background: var(--ty-calendar-panel-item-selected-hover-bg);
      }
    }

    &_out {
      color: var(--ty-calendar-decade-color-out);
    }
  }

  // ── Footer ──────────────────────────────────────────────────────────────

  &__footer {
    padding: var(--ty-calendar-footer-padding);
    border-top: 1px solid var(--ty-calendar-border);
    text-align: center;
  }

  &__today-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--ty-calendar-header-label-radius);
    background: transparent;
    color: var(--ty-calendar-today-color);
    cursor: pointer;
    font: inherit;
    font-size: var(--ty-calendar-today-font-size);
    line-height: 1;
    appearance: none;
    transition:
      color 0.2s,
      background-color 0.2s,
      border-color 0.2s,
      box-shadow 0.2s;

    &:hover {
      color: var(--ty-calendar-today-color-hover);
      background: var(--ty-calendar-today-hover-bg);
    }

    &:active {
      background: var(--ty-calendar-today-active-bg);
    }

    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--ty-calendar-today-focus-ring);
    }
  }
}