@layer components {
  .calendar {
    a, button {
      border-radius: 100%;

      &[data-status="past"] {
        background-color: var(--color-delivery-past-50);
        color: var(--color-content-on-light);

        &:hover {
          background-color: var(--color-delivery-past-hover);
          color: var(--color-content-on-light);
        }
      }

      &[data-status="current"] {
        color: var(--color-content-on-dark);
      }
    }
  }
}