.calendar {
  width: min-content;
}

.grid {
  width: 100%;
  color: var(--text-normal);
  /** TODO Normalize font sizes. This is text-md */
  font-size: 16px;
  text-align: center;
  border-collapse: collapse;
}

.weekday {
  color: var(--text-secondary);
  font-size: 14px;
  padding-bottom: var(--space-md);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  height: 32px;
  width: 32px;
  border-radius: var(--radius-full);
  user-select: none;

  /* Need this for lower specificity so that .selected still comes through */
  &:where(:not(.disabled, .unavailable)) {
    &:hover,
    &:focus {
      cursor: pointer;
      background-color: var(--background-highlight);
    }
  }

  &.disabled {
    opacity: 0.5;
  }

  &.selected {
    background-color: var(--accent-primary);
    color: var(--accent-foreground);
  }

  &.unavailable {
    color: var(--text-secondary);
  }

  &.range {
    &.selected {
      background-color: var(--accent-translucent);
      color: var(--interactive-normal);
      border-radius: 0;

      &:hover,
      &:focus {
        background-color: var(--accent-background);
      }
    }

    &.rangeStart,
    &.rangeEnd {
      background-color: var(--accent-primary);
      color: var(--accent-foreground);
    }

    &.rangeStart {
      border-top-left-radius: var(--radius-full);
      border-bottom-left-radius: var(--radius-full);
    }
    &.rangeEnd {
      border-top-right-radius: var(--radius-full);
      border-bottom-right-radius: var(--radius-full);
    }
  }
}