.input {
    @apply w-full border border-gray-300 appearance-none
    focus:outline-none focus:ring-0 focus:border-[--bg-color]
    rounded-md p-1 bg-white h-10;

    /*----------------------------------
        Note:
        - This input is used in tables.
     ----------------------------------*/
}

/*------------------------------------------------------------------------
    Note:
    - The input field and input label are used in the floating label form.
 ------------------------------------------------------------------------*/
.input-field {
    @apply block px-2.5 pt-5 pb-2.5 w-full
    bg-transparent text-sm text-gray-900
    rounded-md border border-gray-300
    appearance-none focus:outline-none
    focus:ring-0 focus:border-[--bg-color]
    h-10 transition-all duration-300 ease-in-out;
}

.input-label {
    @apply absolute text-sm duration-300 translate-y-1.5 transform scale-100 top-1 z-10 origin-[0] bg-transparent px-1 start-2;
    pointer-events: none;
}

.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label,
.input:focus + .input-label,
.input:not(:placeholder-shown) + .input-label {
    @apply font-medium bg-gray-50;
    transform: scale(0.75) translateY(-1.1rem);
}


/** Input Color */
.color-picker {
    @apply flex flex-col gap-8;
}

.color-label {
    @apply absolute text-sm duration-300 translate-y-1.5 transform scale-100 top-1 z-10 origin-[0] bg-transparent px-1 start-2;
}

.color-input {
    @apply w-full h-10 border border-gray-300 rounded-lg cursor-pointer p-0 outline-none
    transition duration-300 focus:border-[--bg-color] hover:border-gray-400;

    -webkit-appearance: none;
}

.color-input::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}

.color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-input:hover {
    @apply border-[--bg-color-hover]
}

.color-input:focus {
    @apply border border-[--bg-color] shadow-md;
}


/** Input File */
.file-upload {
    @apply flex flex-col gap-8;
}

.file-label {
    @apply flex items-center gap-2 bg-gray-100 border border-gray-300 rounded-md p-[0.2rem]
    cursor-pointer transition-all duration-300 ease-in-out;
}

.file-label:hover {
    @apply bg-gray-200 border-gray-400;
}

.file-button {
    @apply bg-color text-color p-2 rounded-md
    text-xs cursor-pointer transition-all duration-300 ease-in-out;
}

.file-button:hover {
    @apply bg-[--text-color] text-[--bg-color] border border-[--bg-color];
}

.file-name {
    @apply text-gray-500 text-sm truncate overflow-hidden whitespace-nowrap;
}

.file-input {
    @apply hidden;
}

/** Country Code Phone */
.country-code {
    @apply text-sm text-gray-900 bg-gray-100 border border-gray-300 rounded-md px-2 py-1.5 h-10;
    appearance: none;
    outline: none;
    cursor: pointer;
}

.dropdown-country-select2 {
    @apply !w-auto text-start
}

/** Input Radio Payment Method */
.payments-container {
    @apply flex flex-wrap justify-center gap-4;
}

.payment-option {
    @apply flex items-center gap-2 p-2 rounded-md border border-gray-300 cursor-pointer transition-all text-[--bg-color] duration-300 ease-in-out
    hover:bg-color-hover hover:text-color h-20;
}

.payment-option input { @apply hidden; }

.payment-option label {
    @apply flex items-center gap-2 w-full cursor-pointer;
}

.payment-option.selected {
    @apply border-[--bg-color] bg-[--bg-color] text-color;
}