@tailwind base;
@tailwind components;
@tailwind utilities;

/* Native selects draw their own arrow flush against the border. The :not()
   chain outranks px-* utilities so the text never runs under the chevron. */
@layer base {
  select:not([multiple]):not([size]) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%239ca3af' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    padding-right: 2.5rem;
    print-color-adjust: exact;
  }

  select:where(:not([multiple]):not([size])) {
    background-color: #fff;
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/