/*----------------------------------
    SWAL2 Modals
----------------------------------*/
.swal2-html-container {
    @apply max-h-[50vh] overflow-y-auto text-center font-semibold;
    /*
        Styles for SWAL2 modal content:
        - Sets max height to 40vh, overflow to auto, and text justification.
    */
}
.swal2-container .swal2-icon {
    @apply text-sm;
}

.swal2-popup .swal2-confirm {
    @apply bg-color text-color;
    /*
        Styles for SWAL2 confirm button:
        - Orange background with border and white text.
    */
}

.swal2-popup .swal2-cancel {
    @apply bg-gray-400 border text-white border-solid border-gray-400;
    /*
        Styles for SWAL2 cancel button:
        - Dark gray background with border and white text.
    */
}

.swal2-popup .swal2-title {
    @apply text-xl;
    /*
        Styles for SWAL2 modal title:
        - Sets font size to 2xl.
    */
}

/*----------------------------------
    SWAL2 Toasts
----------------------------------*/
.swal2-toast {
    @apply bg-[#e4e4e5] text-black rounded-[10px] absolute top-0 right-0 m-4 w-full max-w-[400px];
    /*
        Styles for SWAL2 toast:
        - Light gray background with black text and rounded corners.
    */
}
.swal2-toast .swal2-icon {
    @apply text-black;
    /*
        Styles for SWAL2 toast icon:
        - Sets icon color to black.
    */
}
.swal2-toast .swal2-close {
    @apply text-black;
    /*
        Styles for SWAL2 toast close button:
        - Sets close button color to black.
    */
}

/*----------------------------------
    SWAL2 Progress Bar
----------------------------------*/
.swal2-progress-bar {
    @apply w-full h-5 bg-gray-50 rounded overflow-hidden mt-2;
    /*
        Styles for SWAL2 progress bar:
        - Sets height to 5px, background to gray, rounded corners, overflow hidden, and margin top to 2.
    */

}
.swal2-progress-bar-inner {
    @apply w-0 h-full bg-color transition ease-in-out duration-200;
    /*
        Styles for SWAL2 progress bar inner:
        - Sets height to full and background to color.
    */
}

/*----------------------------------
    SWAL2 Validations
----------------------------------*/
.swal2-validation-message {
    @apply text-red-600 bg-red-100 p-2 rounded m-2 font-semibold text-sm;
    /*
        Styles for SWAL2 validation message:
        - Sets text color to red.
    */
}

/*----------------------------------
    SWAL2 Input
----------------------------------*/
.swal-custom-input {
    @apply bg-transparent text-sm text-gray-900
    rounded-md border border-gray-300 p-2
    appearance-none focus:outline-none
    focus:ring-0 focus:border-[--bg-color]
    h-10 transition-all duration-300 ease-in-out;
}