/*
 * Date Badge Component
 * Compact calendar-style date display (month + day)
 */

@layer components {
  .date-badge {
    flex-shrink: 0;
    width: 3.5rem;
    border: var(--border-standard);
    overflow: hidden;
    text-align: center;

    & > :first-child {
      background-color: var(--color-gray-darker);
      color: var(--color-white);
      font-size: var(--text-xx-small);
      /* text-transform: uppercase; */
      padding-block: 0.15rem;
      letter-spacing: var(--tracking-wider);
    }

    & > :last-child {
      background-color: var(--color-white);
      color: var(--color-gray-darker);
      font-size: var(--text-medium);
      padding-block: 0.25rem;
      line-height: var(--leading-snug);
    }
  }
}