@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;

@layer cinder.components {
  .cinder-calendar {
    display: grid;
    gap: var(--cinder-space-2);
    inline-size: min(20rem, 100%);
  }

  .cinder-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cinder-space-2);
  }

  .cinder-calendar__nav {
    appearance: none;
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-sm);
    background: var(--cinder-surface-raised);
    color: var(--cinder-text-default);
    inline-size: 2rem;
    block-size: 2rem;
    cursor: pointer;
  }

  .cinder-calendar__nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .cinder-calendar__title {
    margin: 0;
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-medium);
    color: var(--cinder-text-default);
  }

  .cinder-calendar__weekdays,
  .cinder-calendar__grid-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--cinder-space-1);
  }

  .cinder-calendar__weekday {
    font-size: var(--cinder-text-xs);
    text-align: center;
    color: var(--cinder-text-muted);
  }

  .cinder-calendar__grid {
    display: grid;
    gap: var(--cinder-space-1);
  }

  .cinder-calendar__gridcell {
    display: grid;
  }

  .cinder-calendar__day {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--cinder-radius-sm);
    background: transparent;
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-sm);
    inline-size: 100%;
    block-size: 2rem;
    cursor: pointer;
  }

  .cinder-calendar__day[data-outside] {
    color: var(--cinder-text-subtle);
  }

  .cinder-calendar__day[data-selected] {
    background: color-mix(in oklch, var(--cinder-accent-solid), transparent 84%);
    border-color: var(--cinder-accent-solid);
    color: var(--cinder-accent-text);
  }

  .cinder-calendar__day[data-in-range],
  .cinder-calendar__day[data-range-preview] {
    background: var(--cinder-accent-background);
  }

  .cinder-calendar__day[data-range-start],
  .cinder-calendar__day[data-range-end] {
    background: var(--cinder-accent-solid);
    color: var(--cinder-accent-contrast);
  }

  .cinder-calendar__day[data-focused] {
    box-shadow: inset 0 0 0 1px var(--cinder-ring-color);
  }

  .cinder-calendar__day[aria-disabled='true'] {
    color: var(--cinder-text-disabled);
    cursor: not-allowed;
  }

  .cinder-calendar__day:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    /* Ring replaces the border while focused rather than stacking on it — the two
       together read as one heavier shape than either was designed to be. */
    border-color: transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  @media (forced-colors: active) {
    .cinder-calendar__day:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: 1px;
      box-shadow: none;
    }
  }
}