@layer components {
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .form__errors {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-negative-dark);
    background-color: var(--color-negative-light);
    color: var(--color-negative-ink);
  }

  .input {
    inline-size: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface);

    &:focus {
      border-color: var(--color-accent);
      outline: 2px solid var(--color-accent);
      outline-offset: -1px;
    }
  }

  .color-scheme.color-scheme--dark .input {
    color: var(--color-ink);
  }

  @media (prefers-color-scheme: dark) {
    .color-scheme:not(.color-scheme--light) .input {
      color: var(--color-ink);
    }
  }

  .form__actions {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
  }

  .form__schedule-popup {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    margin-block-start: var(--space-1);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-subtle);
    z-index: var(--z-above);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 15rem;
  }

  .color-scheme.color-scheme--dark .form__schedule-popup {
    background-color: oklch(27.08% 0.006 285.84);
    border-color: oklch(37.14% 0.014 285.75);
  }

  @media (prefers-color-scheme: dark) {
    .color-scheme:not(.color-scheme--light) .form__schedule-popup {
      background-color: oklch(27.08% 0.006 285.84);
      border-color: oklch(37.14% 0.014 285.75);
    }
  }
}