@import "./theme.css";

.react-aria-RangeCalendar {
  width: calc(var(--spacing-9) * 7);
  max-width: 100%;
  container-type: inline-size;
  font: var(--font-size) system-ui;
  color: var(--text-color);

  header {
    display: flex;
    align-items: center;
    margin: 0 var(--spacing-1) var(--spacing-4) var(--spacing-1);

    .react-aria-Heading {
      flex: 1;
      margin: 0;
      text-align: center;
      font-size: var(--font-size-lg);
    }
  }

  .react-aria-CalendarGrid {
    border-collapse: collapse;
    border-spacing: 0;
  }

  [slot=errorMessage] {
    font-size: var(--font-size-sm);
    color: var(--invalid-color);
  }

  .react-aria-CalendarCell {
    margin: 2px 0;
    padding: 0 calc(var(--gap) / 2);
    position: relative;
    z-index: 1;
    outline: none;

    span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      border-radius: 9999px;
      transition: scale 200ms;
    }

    &[data-selected] {
      border-radius: 0;
      background: var(--button-background);
      border-color: var(--tint-700);
      border-style: solid;
      border-width: 0;
      border-top-width: 0.5px;
      border-bottom-width: 0.5px;
      margin: 1.5px 0;

      @media (forced-colors: active) {
        border-color: Highlight;
      }

      &[data-selection-start],
      &:is(td:first-child > *, [aria-disabled] + td > *)  {
        border-start-start-radius: 9999px;
        border-end-start-radius: 9999px;
        border-inline-start-width: 0.5px;
        margin-inline-start: calc(var(--gap) / 2 - 0.5px);
        padding-inline-start: 0;
      }

      &[data-selection-end],
      &:is(td:last-child > *, td:has(+ [aria-disabled]) > *) {
        border-end-end-radius: 9999px;
        border-start-end-radius: 9999px;
        border-inline-end-width: 0.5px;
        margin-inline-end: calc(var(--gap) / 2 - 0.5px);
        padding-inline-end: 0;
      }

      &[data-selection-start],
      &[data-selection-end] {
        z-index: 2;
      }

      &:not([data-selection-start], [data-selection-end]) span {
        color: var(--tint-1200);
        @media (forced-colors: active) {
          color: ButtonText;
        }
      }
    }

    &[data-pressed] {
      scale: 1;
      span {
        scale: 0.9;
      }
    }

    &[data-focus-visible] {
      outline: none;
      z-index: 2;
      span {
        outline: 2px solid var(--focus-ring-color);
        outline-offset: 2px;
      }
    }
  }
}
