@layer components {
  .calendar {
    a, button {
      &[data-status="past"] {
        color: var( --color-purple-400);
        background-color: var(--color-delivery-past);
        border: 1px solid var( --color-purple-400);
        &:hover {
          background-color: transparent;
          border: 1px dashed var(--color-purple-400);
        }
      }

      &[data-status="current"] {
        color: var( --color-green-400);
        background-color: var(--color-delivery-current);
        border: 1px solid var( --color-green-400);
        &:hover {
          background-color: transparent;
          border: 1px dashed var(--color-green-400);
        }
      }

      &[data-status="upcoming"] {
        color: var( --color-orange-400);
        background-color: var(--color-delivery-upcoming);
        border: 1px solid var(--color-orange-400);
        &:hover {
          background-color: transparent;
          border: 1px dashed var(--color-orange-400);
        }
      }

      &[data-status="skipped"] {
        color: var( --color-neutral-400);
        background-color: var(--color-delivery-skipped);
        border: 1px solid var(--color-neutral-400);
        &:hover {
          background-color: transparent;
          border: 1px dashed var(--color-neutral-400);
        }
      }

      &[data-status="orderable"] {
        background-color: var(--color-surface-light);
        &:hover {
          background-color: var(--color-surface-light);
          color: var(--color-content-on-light);
          text-decoration: underline;
        }
      }

      &[data-status="unavailable"] {
        color: var(--color-neutral-300);
      }
    }
  }
}