@layer components {
  .rs-calendar {
    inline-size: min(100%, 320px);
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
  }

  .rs-calendar caption {
    margin-block-end: var(--rs-unit-x3);
    color: var(--rs-color-foreground-neutral);
    font-weight: var(--rs-font-weight-semibold);
    text-align: start;
  }

  .rs-calendar th {
    padding-block-end: var(--rs-unit-x2);
    color: var(--rs-color-foreground-neutral-faded);
    font-size: var(--rs-font-size-caption-1);
    font-weight: var(--rs-font-weight-regular);
    line-height: var(--rs-line-height-caption-1);
  }

  .rs-calendar td {
    padding: 2px;
  }

  .rs-calendar button {
    appearance: none;
    inline-size: 100%;
    border: 0;
    border-radius: var(--rs-radius-small);
    padding: var(--rs-unit-x2);
    background: transparent;
    color: var(--rs-color-foreground-neutral);
    font-variant-numeric: inherit;
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      color var(--rs-duration-fast) var(--rs-easing-standard);
  }

  @media (hover: hover) and (pointer: fine) {
    .rs-calendar button:hover:not(:disabled, [aria-pressed="true"]) {
      background: color-mix(
        in oklch,
        var(--rs-color-background-neutral),
        transparent 68%
      );
    }
  }

  .rs-calendar button[aria-pressed="true"] {
    background: var(--rs-color-background-primary);
    color: var(--rs-color-on-background-primary);
  }

  .rs-calendar button[data-range] {
    background: color-mix(
      in oklch,
      var(--rs-color-background-neutral),
      transparent 68%
    );
  }

  .rs-calendar button:disabled {
    color: var(--rs-color-foreground-disabled);
    cursor: not-allowed;
  }
}