@layer components {
  .search-form {
    background: color-mix(in srgb, var(--color-ink) 3%, transparent);
    padding: calc(var(--block-space) * 1.5) calc(var(--inline-space) * 2);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin-block-end: calc(var(--block-space) * 1.5);

    h2 {
      margin-block-start: 0;
      margin-block-end: var(--block-space);
    }
  }

  .search-form__row {
    display: flex;
    gap: var(--inline-space);
    align-items: stretch;

    .form-control {
      flex: 1;
    }

    .btn {
      flex-shrink: 0;
    }
  }

  .form-group {
    margin-block-end: var(--block-space);

    label {
      display: block;
      font-weight: 600;
      margin-block-end: calc(var(--block-space) / 3);
      color: var(--color-ink);
    }
  }

  .form-control {
    inline-size: 100%;
    padding-block: 0.75em;
    padding-inline: 1em;
    font-size: var(--text-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-canvas);
    color: var(--color-ink);
    transition: var(--transition-fast);

    &::placeholder {
      color: var(--color-ink-light);
    }

    &:focus {
      outline: none;
      border-color: var(--color-info);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-info) 15%, transparent);
    }

    &:hover {
      border-color: color-mix(in srgb, var(--color-info) 50%, var(--color-border));
    }
  }

  /* Textarea specific styles */
  textarea.form-control {
    resize: vertical;
    min-block-size: 8em;
    line-height: 1.5;
  }

  /* Select specific styles */
  select.form-control {
    cursor: pointer;
  }
}