:root {
  --select-arrow-color: var(--color-text);
  --select-width-mobile: 18.75rem; /* 300px minimum on mobile */
  --select-width-desktop: 100%; /* Full width on larger screens */
}

select {
  border: var(--input-outline);
  border-radius: var(--input-radius);
  outline: none;
  background-color: var(--input-bg, var(--color-surface));
  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
  -moz-appearance: none; /* Remove default arrow in Firefox */
  appearance: none; /* Remove default arrow in other browsers */
  background-image: linear-gradient(45deg, transparent 50%, var(--select-arrow-color, currentColor) 50%), linear-gradient(135deg, var(--select-arrow-color, currentColor) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) center, calc(100% - 1rem) center;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  padding-inline-start: var(--input-padding-inline);
  padding-inline-end: 2.5rem;
  padding-block: var(--input-padding-block);
  width: max(var(--select-width-mobile), var(--select-width-desktop));
}

/* ==========================================================================
   Option Styling with Data Attributes
   ========================================================================== */
/*
option[data-option="primary"] {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

option[data-option="success"] {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

option[data-option="error"] {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

option[data-option="warning"] {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}
*/
/*
option[data-size="sm"] {
  font-size: 0.875rem; // 14px
  padding: 0.25rem 0.5rem;
}

option[data-size="lg"] {
  font-size: 1.125rem; // 18px
  padding: 0.75rem 1rem;
  font-weight: 500;
}
*/
/*
option[data-featured="true"] {
  font-weight: 700;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

option[data-category="premium"] {
  background-color: var(--color-warning-bg);
  font-style: italic;
}
*/

/*# sourceMappingURL=select.css.map */