/**
 * INPUT
 * 
 *
*/
@layer components {
    .n7-input {
        @apply flex items-center relative;
    }

    .n7-input [type='text'],
    .n7-input input:where(:not([type])),
    .n7-input [type='email'],
    .n7-input [type='url'],
    .n7-input [type='password'],
    .n7-input [type='number'],
    .n7-input [type='date'],
    .n7-input [type='datetime-local'],
    .n7-input [type='month'],
    .n7-input [type='search'],
    .n7-input [type='tel'],
    .n7-input [type='time'],
    .n7-input [type='week'],
    .n7-input [multiple],
    .n7-input textarea {
        @apply w-full py-2 px-3 border n7-border-input rounded-lg;
    }


    .n7-input [type='text'],
    .n7-input input:where(:not([type])),
    .n7-input [type='email'],
    .n7-input [type='url'],
    .n7-input [type='password'],
    .n7-input [type='number'],
    .n7-input [type='date'],
    .n7-input [type='datetime-local'],
    .n7-input [type='month'],
    .n7-input [type='search'],
    .n7-input [type='tel'],
    .n7-input [type='time'],
    .n7-input [type='week'],
    .n6-input [multiple] {
        @apply h-11;
    }

    /* ICON STYLES */
    .n7-input__icon {
        @apply absolute left-4 n7-content-placeholder w-6 h-6;
    }

    .n7-input--sm .n7-input__icon {
        @apply w-4 h-4 left-3;
    }

    .n7-input--lg .n7-input__icon {
        @apply w-8 h-8 left-4;
    }

    /* HAS ICON SIZE STYLE */
    .has-icon.n7-input [type='text'],
    .has-icon.n7-input input:where(:not([type])),
    .has-icon.n7-input [type='email'],
    .has-icon.n7-input [type='url'],
    .has-icon.n7-input [type='password'],
    .has-icon.n7-input [type='number'],
    .has-icon.n7-input [type='date'],
    .has-icon.n7-input [type='datetime-local'],
    .has-icon.n7-input [type='month'],
    .has-icon.n7-input [type='search'],
    .has-icon.n7-input [type='tel'],
    .has-icon.n7-input [type='time'],
    .has-icon.n7-input [type='week'],
    .has-icon.n7-input [multiple],
    .has-icon.n7-input textarea {
        @apply pl-12;
    }


    /* VALIDATION STYLES */
    .is-invalid .n7-input input,
    .n7-input input[aria-invalid="true"],
    .has-error.n7-input input {
        @apply border-2 n7-border-error-dark;
    }


    /* SIZE STYLES */
    .n7-input--sm [type='text'],
    .n7-input--sm input:where(:not([type])),
    .n7-input--sm [type='email'],
    .n7-input--sm [type='url'],
    .n7-input--sm [type='password'],
    .n7-input--sm [type='number'],
    .n7-input--sm [type='date'],
    .n7-input--sm [type='datetime-local'],
    .n7-input--sm [type='month'],
    .n7-input--sm [type='search'],
    .n7-input--sm [type='tel'],
    .n7-input--sm [type='time'],
    .n7-input--sm [type='week'],
    .n7-input--sm [multiple] {
        @apply h-8;
    }

    .n7-input--sm [type='text'],
    .n7-input--sm input:where(:not([type])),
    .n7-input--sm [type='email'],
    .n7-input--sm [type='url'],
    .n7-input--sm [type='password'],
    .n7-input--sm [type='number'],
    .n7-input--sm [type='date'],
    .n7-input--sm [type='datetime-local'],
    .n7-input--sm [type='month'],
    .n7-input--sm [type='search'],
    .n7-input--sm [type='tel'],
    .n7-input--sm [type='time'],
    .n7-input--sm [type='week'],
    .n7-input--sm [multiple],
    .n7-input--sm textarea {
        @apply py-1 px-2;
    }

    .has-icon.n7-input--sm [type='text'],
    .has-icon.n7-input--sm input:where(:not([type])),
    .has-icon.n7-input--sm [type='email'],
    .has-icon.n7-input--sm [type='url'],
    .has-icon.n7-input--sm [type='password'],
    .has-icon.n7-input--sm [type='number'],
    .has-icon.n7-input--sm [type='date'],
    .has-icon.n7-input--sm [type='datetime-local'],
    .has-icon.n7-input--sm [type='month'],
    .has-icon.n7-input--sm [type='search'],
    .has-icon.n7-input--sm [type='tel'],
    .has-icon.n7-input--sm [type='time'],
    .has-icon.n7-input--sm [type='week'],
    .has-icon.n7-input--sm [multiple],
    .has-icon.n7-input--sm textarea {
        @apply pl-10;
    }

    .n7-input--lg [type='text'],
    .n7-input--lg input:where(:not([type])),
    .n7-input--lg [type='email'],
    .n7-input--lg [type='url'],
    .n7-input--lg [type='password'],
    .n7-input--lg [type='number'],
    .n7-input--lg [type='date'],
    .n7-input--lg [type='datetime-local'],
    .n7-input--lg [type='month'],
    .n7-input--lg [type='search'],
    .n7-input--lg [type='tel'],
    .n7-input--lg [type='time'],
    .n7-input--lg [type='week'],
    .n7-input--lg [multiple] {
        @apply h-14;
    }

    .n7-input--lg [type='text'],
    .n7-input--lg input:where(:not([type])),
    .n7-input--lg [type='email'],
    .n7-input--lg [type='url'],
    .n7-input--lg [type='password'],
    .n7-input--lg [type='number'],
    .n7-input--lg [type='date'],
    .n7-input--lg [type='datetime-local'],
    .n7-input--lg [type='month'],
    .n7-input--lg [type='search'],
    .n7-input--lg [type='tel'],
    .n7-input--lg [type='time'],
    .n7-input--lg [type='week'],
    .n7-input--lg [multiple],
    .n7-input--lg textarea {
        @apply py-3 px-3;
    }


    .has-icon.n7-input--lg [type='text'],
    .has-icon.n7-input--lg input:where(:not([type])),
    .has-icon.n7-input--lg [type='email'],
    .has-icon.n7-input--lg [type='url'],
    .has-icon.n7-input--lg [type='password'],
    .has-icon.n7-input--lg [type='number'],
    .has-icon.n7-input--lg [type='date'],
    .has-icon.n7-input--lg [type='datetime-local'],
    .has-icon.n7-input--lg [type='month'],
    .has-icon.n7-input--lg [type='search'],
    .has-icon.n7-input--lg [type='tel'],
    .has-icon.n7-input--lg [type='time'],
    .has-icon.n7-input--lg [type='week'],
    .has-icon.n7-input--lg [multiple],
    .has-icon.n7-input--lg textarea {
        @apply pl-14;
    }
}