@layer components {
    .select {
        @apply appearance-none bg-white border border-gray-300 px-3 py-2 pr-10 rounded-md text-sm leading-5 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%236B7280' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
    }

    .select:disabled {
        @apply bg-gray-100 cursor-not-allowed;
    }

    .nice-form-group {
        @apply block mt-6 leading-none whitespace-nowrap;
    }

    .nice-form-group > label {
        @apply block font-medium text-gray-700 mb-2 whitespace-normal text-sm;
    }

    .nice-form-group small {
        @apply block font-normal opacity-75 text-sm mb-3;
    }

    .nice-form-group > label {
        font-weight: var(--nf-label-font-weight);
        display: block;
        color: var(--nf-label-color);
        font-family: var(--nf-label-font-family);
        margin-bottom: calc(var(--nf-input-size) / 2);
        white-space: initial;
    }

    .nice-form-group legend {
        @apply block font-medium text-gray-700 mb-1 text-sm;
    }

    .nice-form-group > .nice-form-group {
        @apply mt-2;
    }

    .nice-form-group input[type='text'],
    .nice-form-group input[type='email'],
    .nice-form-group input[type='tel'],
    .nice-form-group input[type='url'],
    .nice-form-group input[type='password'],
    .nice-form-group input[type='number'],
    .nice-form-group input[type='date'],
    .nice-form-group input[type='week'],
    .nice-form-group input[type='time'],
    .nice-form-group input[type='month'],
    .nice-form-group input[type='search'],
    .nice-form-group textarea,
    .nice-form-group select {
        @apply w-full bg-gray-50 text-gray-900 border border-gray-300 rounded px-3 py-2 h-11 text-sm transition duration-150 ease-out appearance-none outline-none;
    }

    .nice-form-group input:focus,
    .nice-form-group textarea:focus,
    .nice-form-group select:focus {
        @apply border-indigo-600;
    }

    .nice-form-group input:disabled,
    .nice-form-group textarea:disabled,
    .nice-form-group select:disabled {
        @apply cursor-not-allowed opacity-75;
    }

    .nice-form-group input:required:invalid:not(:placeholder-shown) {
        @apply bg-gray-50 border-b-2 border-red-500 text-gray-900;
    }

    .nice-form-group input:required:valid:not(:placeholder-shown) {
        @apply bg-gray-50 border-b-2 border-green-500;
    }

    .nice-form-group input[type='checkbox'],
    .nice-form-group input[type='radio'] {
        @apply inline-block align-top w-4 h-4 rounded border border-gray-300 cursor-pointer;
    }

    .nice-form-group input[type='checkbox']:focus:not(:checked),
    .nice-form-group input[type='radio']:focus:not(:checked) {
        @apply border-indigo-600 outline-none;
    }

    .nice-form-group input[type='checkbox']:hover,
    .nice-form-group input[type='radio']:hover {
        @apply border-indigo-600;
    }

    .nice-form-group input[type='range'] {
        @apply w-full cursor-pointer;
    }

    .nice-form-group textarea {
        @apply h-auto;
    }

    .nice-form-group input[type='color'] {
        @apply h-8 rounded border border-gray-300 p-1;
    }

    .nice-form-group input[type='number'] {
        @apply w-auto;
    }

    .nice-form-group input[type='date'],
    .nice-form-group input[type='week'],
    .nice-form-group input[type='month'],
    .nice-form-group input[type='time'] {
        @apply w-auto bg-no-repeat bg-right pr-8;
    }
}