@import "shadcn.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* Add spacing so native select dropdown icon isn't flush with the edge */
  select {
    @apply pr-10; /* 2.5rem right padding */
    /* Hide native arrow and use a custom SVG so positioning respects padding */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    background-origin: content-box;
  }
}