@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.woff?g5go4n') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@layer components {
    input {
        @apply outline-none;
    }

    button:disabled {
        @apply cursor-not-allowed opacity-50;
    }

    .primary-button {
        @apply flex px-5 py-2.5 gap-x-1.5 items-center place-content-center font-medium rounded-xl text-white bg-navyBlue border border-navyBlue max-w-max cursor-pointer transition-all hover:opacity-[0.9];
    }

    .secondary-button {
        @apply flex gap-x-1.5 px-5 py-2.5 items-center place-content-center font-medium rounded-xl bg-white text-navyBlue border border-navyBlue max-w-max cursor-pointer transition-all hover:bg-[#050e3a0d];
    }

    .transparent-button {
        @apply flex gap-x-1.5 px-5 py-2.5 items-center place-content-center font-medium rounded-xl bg-white text-navyBlue border border-transparent max-w-max cursor-pointer transition-all hover:bg-gray-100 focus:bg-gray-100;
    }

    button:disabled:hover {
        @apply cursor-not-allowed opacity-50;
    }

    .required {
        @apply after:ml-0.5;
    }

    [class^="mp-"],
    [class*="mp-"] {
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'icomoon' !important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1 !important;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .mp-eye-off-icon:before {
        content: "\e90d";
    }

    .mp-setting-icon:before {
        content: "\e90e";
    }

    .mp-report-icon:before {
        content: "\e90b";
    }

    .mp-export-icon:before {
        content: "\e90c";
    }

    .mp-communication-icon:before {
        content: "\e909";
    }

    .mp-history-icon:before {
        content: "\a90b";
    }

    .mp-attach-icon:before {
        content: "\a90c";
    }

    .mp-reply-icon:before {
        content: "\a90d";
    }

    .mp-flag-icon:before {
        content: "\e90a";
    }

    .mp-home-icon:before {
        content: "\e900";
    }

    .mp-drag-icon:before {
        content: "\e901";
    }

    .mp-pause-icon:before {
        content: "\e902";
    }

    .mp-play-icon:before {
        content: "\e903";
    }

    .mp-radio-select-icon:before {
        content: "\e904";
    }

    .mp-radio-unselect-icon:before {
        content: "\e905";
    }

    .mp-add-video-icon:before {
        content: "\e906";
    }

    .mp-add-image-icon:before {
        content: "\e907";
    }

    .mp-language-icon:before {
        content: "\e908";
    }

    .mp-dashboard-icon:before {
        content: "\e950";
    }

    .mp-transaction-icon:before {
        content: "\e951";
    }

    .mp-seller-info-icon:before {
        content: "\e952";
    }

    .mp-orders-icon:before {
        content: "\e953";
    }

    .mp-products-icon:before {
        content: "\e954";
    }

    .mp-manage-profile-icon:before {
        content: "\e955";
    }

    .mp-customer-reviews-icon:before {
        content: "\e956";
    }

    .mp-product-reviews-icon:before {
        content: "\e957";
    }

    .mp-seller-reviews-icon:before {
        content: "\e958";
    }

    .mp-customers-icon:before {
        content: "\e959";
    }

    .mp-arrow-right-icon:before {
        content: "\e960";
    }

    .mp-camera-icon:before {
        content: "\e961";
    }

    .mp-arrow-down-icon:before {
        content: "\e962";
    }

    .mp-notification-icon:before {
        content: "\e963";
    }

    .mp-store-icon:before {
        content: "\e964";
    }

    .mp-calendar-icon:before {
        content: "\e965";
    }

    .mp-toast-info-icon:before {
        content: "\e966";
    }

    .mp-cancel-icon:before {
        content: "\e967";
    }

    .mp-eye-icon:before {
        content: "\e968";
    }

    .mp-sort-right-icon:before {
        content: "\e969";
    }

    .mp-search-icon:before {
        content: "\e970";
    }

    .mp-sort-by-icon:before {
        content: "\e971";
    }

    .mp-star-fill-icon:before {
        content: "\e972";
    }

    .mp-star-half-icon:before {
        content: "\e973";
    }

    .mp-share-icon:before {
        content: "\e974";
    }

    .mp-phone-icon:before {
        content: "\e975";
    }

    .mp-issue-icon:before {
        content: "\e976";
    }

    .mp-check-square-icon:before {
        content: "\e977";
    }

    .mp-collapse-icon:before {
        content: "\e978";
    }

    .mp-compare-icon:before {
        content: "\e979";
    }

    .mp-eye-icon-2:before {
        content: "\e980";
    }

    .mp-fast-forward-icon:before {
        content: "\e981";
    }

    .mp-grid-view-icon:before {
        content: "\e982";
    }

    .mp-list-view-icon:before {
        content: "\e983";
    }

    .mp-trending-up-icon:before {
        content: "\e984";
    }

    .mp-delivery-icon:before {
        content: "\e985";
    }

    .mp-payments-icon:before {
        content: "\e986";
    }

    .mp-products-icon:before {
        content: "\e987";
    }

    .mp-receive-orders-icon:before {
        content: "\e988";
    }

    .mp-seller-icon:before {
        content: "\e989";
    }

    .mp-support-icon:before {
        content: "\e990";
    }

    .mp-wishlist-icon:before {
        content: "\e991";
    }

    .mp-upload-icon:before {
        content: "\e992";
    }

    .mp-sort-icon:before {
        content: "\e993";
    }

    .mp-pen-icon:before {
        content: "\e994";
    }

    .mp-delete-icon:before {
        content: "\e995";
    }

    .mp-uncheckbox-icon:before {
        content: "\e996";
    }

    .mp-checked-icon:before {
        content: "\e997";
    }

    .mp-file-attribute-icon:before {
        content: "\e998";
    }

    .mp-arrow-left-stylish-icon:before {
        content: "\e999";
    }

    .mp-arrow-right-stylish-icon:before {
        content: "\e999a";
    }

    .mp-calendar-filled-icon:before {
        content: "\e90f";
    }

    .mp-email-icon:before {
        content: "\e910";
    }

    .mp-location-icon:before {
        content: "\e911";
    }

    .journal-scroll::-webkit-scrollbar {
        width: 1px;
        cursor: pointer;
    }

    .custom-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        background: transparent;
        background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        background-repeat: no-repeat;
        background-position-x: calc(100% - 10px);
        background-position-y: 50%;
    }

    * {
        @apply box-border font-poppins;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* For IE, Edge and Firefox */
    .scrollbar-hide {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .direction-ltr {
        direction: ltr;
    }

    .direction-rtl {
        direction: rtl;
    }

    .shimmer {
        animation-duration: 2.2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: skeleton;
        animation-timing-function: linear;
        background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
        background-size: 1250px 100%;
    }

    @keyframes skeleton {
        0% {
            background-position: -1250px 0;
        }

        100% {
            background-position: 1250px 0;
        }
    }

    @keyframes on-fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .wrapper-404 {
        aspect-ratio: 16/9;
        position: relative;
        font-size: 394px;
        perspective: 4.5em;
        overflow: clip;
        place-self: stretch;
        top: 50%;
        transform: translateY(-62%);
    }

    .glow-404,
    .glow-shadow-404 {
        position: absolute;
        inset: 0;
        display: grid;
        place-content: center;
        font-family: 'DM Serif Display';
        overflow: hidden;
        letter-spacing: 24px;
    }

    .glow-404 {
        background-clip: text;
        -webkit-background-clip: text;
        color: #060C3B;
    }

    .glow-shadow-404 {
        color: #E6E7EB;
        mix-blend-mode: darken;
        transform: translateY(15.5%) rotateX(243deg) scaleY(-1) translateY(-23%) scaleY(1.35) translateX(7%) skewX(-45deg);
    }

    canvas[resize] {
        width: 100%;
        height: 100vh;
    }

    html {
        margin-top: 0px !important;
    }

    .break-word-custom {
        word-break: break-word;
    }

    .required:after {
        content: "*";
    }

    .label-pending,
    .label-pending_payment,
    .label-processing,
    .label-closed,
    .label-fraud,
    .label-cancelled,
    .label-info,
    .label-completed,
    .label-active {
        @apply max-w-max rounded-full px-1.5 py-px text-xs font-semibold text-white;
    }

    .label-pending,
    .label-pending_payment {
        @apply bg-yellow-500;
    }

    .label-processing {
        @apply bg-sky-500;
    }

    .label-completed,
    .label-active {
        @apply bg-green-600;
    }

    .label-closed,
    .label-fraud {
        @apply bg-red-500;
    }

    .label-cancelled {
        @apply bg-pink-600;
    }

    .label-info {
        @apply bg-slate-500;
    }
}

@media not all and (min-width: 1024px) {
    .max-lg\:flex {
        display: flex !important;
    }
}

.leading-\[9px\] {
    line-height: 9px;
}

.justify-stretch {
    justify-content: stretch;
}

.table-responsive {
    @apply overflow-x-auto;
}

@media only screen and (max-device-width: 600px) {
    .table-responsive .row {
        @apply w-[950px];
    }
}

/*
 * Apply important on large viewport.
 * Reason: Restrict mobile header in desktop viewport.
 */
@media (min-width: 1024px) {
    .lg\:hidden {
        display: none !important;
    }
}

/*
 * Apply important on small viewport.
 * Reason: Restrict mobile viewport flash message in desktop viewport.
 */
@media (min-width: 525px) {
    .sm\:hidden {
        display: none !important;
    }
}