@layer components {
  .quota-alert {
    display: flex;
    align-items: center;
    gap: var(--block-space-half);
    margin-block-end: var(--block-space-half);
    padding: 0.75rem var(--block-space);
    border-radius: var(--radius);
  }

  .quota-alert--warning {
    background-color: oklch(var(--lch-yellow-lightest));
    border: 1px solid oklch(var(--lch-yellow-lighter));
    color: oklch(var(--lch-yellow-darkest));
  }

  .quota-alert--info {
    background-color: oklch(var(--lch-blue-lightest));
    border: 1px solid oklch(var(--lch-blue-lighter));
    color: oklch(var(--lch-blue-darkest));
  }

  .quota-alert__content {
    flex-grow: 1;
  }
}