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

/* -------------------------------- new css -------------------------------- */

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

[class^="icon-"],
[class*=" icon-"] {
    /* 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;

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

@layer components {
    .icon-cross-large:before {
        content: "\e91c";
    }

    [dir="rtl"] .stage::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -10px;
        width: 24px;
        height: 24px;
        z-index: 1;
        border-radius: 0 0 0 25px;
        transform: translateY(-50%) rotate(225deg);
        border-right: 4px solid #f3f4f6;
        border-top: 4px solid #f3f4f6;
    }

    [dir="rtl"] .stage::after {
        display: none;
    }

    .primary-button {
        @apply bg-brandColor border border-brandColor cursor-pointer flex focus:opacity-[0.9] font-semibold gap-x-1 hover:opacity-[0.9] items-center place-content-center px-3 py-1.5 rounded-md text-gray-50 transition-all;
    }

    .secondary-button {
        @apply flex cursor-pointer place-content-center items-center gap-x-1 whitespace-nowrap rounded-md border-2 border-brandColor bg-white px-3 py-1.5 font-semibold text-brandColor transition-all hover:bg-[#eff6ff61] focus:bg-[#eff6ff61] dark:border-gray-400 dark:bg-gray-800 dark:text-white dark:hover:opacity-80;
    }

    .transparent-button {
        @apply flex cursor-pointer appearance-none place-content-center items-center gap-x-1 whitespace-nowrap rounded-md border-2 border-transparent px-3 py-1.5 font-semibold text-gray-600 transition-all marker:shadow hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-950;
    }

    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }

    ::selection {
        background-color: rgba(0, 68, 242, 0.2);
    }

    body {
        @apply bg-gray-100 text-sm text-gray-800;
    }

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

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

    .draggable-ghost {
        opacity: 0.5;
        background: #e0e7ff;
    }

    html.dark [class^="icon-"],
    html.dark [class*=" icon-"] {
        color: #d1d5db;
    }

    p {
        @apply text-[14px] !leading-[17px];
    }

    input,
    textarea,
    select {
        @apply outline-none;
    }

    .required:after {
        @apply content-['*'];
    }
}