@layer components {
    .icon-small {
        @apply w-4 h-4 bg-secondary_light;
    }

    .icon-medium {
        @apply w-6 h-6 bg-secondary_light;
    }

    .hero-arrow {
        @apply w-4 h-4 bg-secondary_light transform rotate-45;
    }

    /* Custom green chevron for select elements */
    select:not([size]) {
        background-size: 1rem;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2321C39D' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    }
}