.cursor,
label {
    cursor: pointer;
}

/** Init: Bootstrap 5
    https://getbootstrap.com/docs/5.0/layout/breakpoints/
    (xs) — screen width < 576px (This is the “default” tier)
    sm — screen width ≥ 576px
    md — screen width ≥ 768px
    lg — screen width ≥ 992px
    xl — screen width ≥ 1200px
**/

.input-group .dropdown {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.dropdown-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Input Floating Placeholder */
.form-floating > .form-control::placeholder {
    color: revert !important;
}

.form-floating > .form-control:not(:focus)::placeholder {
    color: transparent !important;
}

/** End: Bootstrap 5 **/

/*
    https://laravel-livewire.com/docs/2.x/actions#introduction
    Like the above example using `wire:submit.prevent` directly at the form opening tag will generate "readonly" properties for all html elements inside the form during the requests.
*/

/* [wire\:submit\.prevent] > input {
    width: 5% !important;
} */

/* input[readonly] {
    color: black !important;
    background-color: yellow !important;
} */

.hide-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;

    &::-webkit-scrollbar {
        width: 1px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
}

/** Large devices (desktops, 992px and up)  **/
@media (min-width: 992px) {
    .swiper-middle {
        margin: 0 -10%;
    }

    /** RESPONSIVE WIDTH **/
    .w-lg-25 {
        width: 25% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-100 {
        width: 100% !important;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .swiper-middle {
        margin: 0;
    }
}