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

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

@layer components {
    ::selection {
        background-color: rgba(0, 68, 242, .2);
    }

    body {
        @apply bg-violet-50 bg-opacity-50 font-inter;
    }

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

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

    .direction-ltr {
        direction: ltr;
    }

    .direction-rtl {
        direction: rtl;
    }

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

    [class^="icon-"],
    [class*=" icon-"] {
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: "unopim-admin" !important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        @apply text-gray-600;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1 !important;
    }

    html.dark [class^="icon-"],
    html.dark [class*=" icon-"]{
       @apply text-slate-50;
    }

    html.dark .active [class^="icon-"],
    html.dark .active [class*=" icon-"]{
        @apply text-violet-700;
    }

    .box-shadow {
        @apply shadow-[0px_0px_0px_0px_rgba(0,0,0,0.03),0px_1px_1px_0px_rgba(0,0,0,0.03),0px_3px_3px_0px_rgba(0,0,0,0.03),0px_6px_4px_0px_rgba(0,0,0,0.02),0px_11px_4px_0px_rgba(0,0,0,0.00),0px_17px_5px_0px_rgba(0,0,0,0.00)] border-[1px] dark:border-gray-800;
    }

    .overflow-wrap {
        overflow-wrap: break-word;
    }

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

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

    .input-group {
        z-index: -1;
    }

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

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

    .secondary-button {
        @apply flex gap-x-1 items-center px-3 py-1.5 bg-white border-2 border-violet-600 text-violet-600 rounded-md font-semibold whitespace-nowrap cursor-pointer transition-all hover:text-violet-500 hover:border-violet-500 hover:bg-violet-100  ;
    }

    .transparent-button {
        @apply flex gap-x-1 items-center px-3 py-1.5 border-2 border-transparent rounded-md text-violet-600 font-semibold whitespace-nowrap cursor-pointer marker:shadow appearance-none transition-all hover:text-violet-500 hover:bg-violet-50 dark:hover:bg-cherry-900  dark:text-slate-50 ;
    }

    .danger-button {
        @apply flex gap-x-1 items-center px-3 py-1.5 bg-red-600 rounded-md text-gray-50 font-semibold cursor-pointer transition-all hover:opacity-90 focus:opacity-90;
    }

    .journal-scroll::-webkit-scrollbar {
        width: 14px;
        cursor: pointer;
        display: none;
    }

    .journal-scroll::-webkit-scrollbar-track {
        background-color: #fff;
        cursor: pointer;
        border-radius: 12px;
        border: 1px solid #e9e9e9;
    }

    .journal-scroll::-webkit-scrollbar-thumb {
        cursor: pointer;
        background-color: #e9e9e9;
        border-radius: 12px;
        border: 3px solid transparent;
        background-clip: content-box;
    }

    /** Icons */
    .icon-product:before {
        content: "\e92b";
    }
    .icon-add-video:before {
        content: "\e92c";
    }
    .icon-information:before {
        content: "\e92d";
    }
    .icon-down:before {
        content: "\e92e";
    }
    .icon-up:before {
        content: "\e92f";
    }
    .icon-left:before {
        content: "\e930";
    }
    .icon-right:before {
        content: "\e931";
    }
    .icon-pause:before {
        content: "\e932";
    }
    .icon-done:before {
        content: "\e933";
    }
    .icon-checkbox-partial:before {
        content: "\e934";
    }
    .icon-star:before {
        content: "\e935";
    }
    .icon-play:before {
        content: "\e936";
    }
    .icon-image:before {
        content: "\e926";
    }
    .icon-cancel:before {
        content: "\e927";
    }
    .icon-done:before {
        content: "\e928";
    }
    .icon-information:before {
        content: "\e929";
    }
    .icon-processing:before {
        content: "\e92a";
    }
    .icon-dot:before {
        content: "\e923";
    }
    .icon-down-stat:before {
        content: "\e924";
    }
    .icon-up-stat:before {
        content: "\e925";
    }
    .icon-collapse:before {
        content: "\e922";
    }
    .icon-checkbox-check:before {
        content: "\e91d";
    }
    .icon-channel:before {
        content: "\e91e";
    }
    .icon-language:before {
        content: "\e91f";
    }
    .icon-radio-normal:before {
        content: "\e920";
    }
    .icon-radio-selected:before {
        content: "\e921";
    }
    .icon-view-close:before {
        content: "\e91c";
    }
    .icon-calendar:before {
        content: "\e900";
    }
    .icon-cancel:before {
        content: "\e901";
    }
    .icon-catalog:before {
        content: "\e902";
    }
    .icon-checkbox-normal:before {
        content: "\e903";
    }
    .icon-chevron-down:before {
        content: "\e904";
    }
    .icon-chevron-left:before {
        content: "\e905";
    }
    .icon-chevron-right:before {
        content: "\e906";
    }
    .icon-chevron-up:before {
        content: "\e907";
    }
    .icon-configuration:before {
        content: "\e908";
    }
    .icon-copy:before {
        content: "\e909";
    }
    .icon-dark:before {
        content: "\e90a";
    }
    .icon-notification:before {
        content: "\e937";
    }
    .icon-dashboard:before {
        content: "\e90b";
    }
    .icon-data-transfer:before {
        content: "\e90c";
    }
    .icon-delete:before {
        content: "\e90d";
    }
    .icon-edit:before {
        content: "\e90e";
    }
    .icon-export:before {
        content: "\e90f";
    }
    .icon-view:before {
        content: "\e910";
    }
    .icon-file:before {
        content: "\e911";
    }
    .icon-attribute:before {
        content: "\e911";
    }
    .icon-filter:before {
        content: "\e912";
    }
    .icon-folder-block:before {
        content: "\e913";
    }
    .icon-folder:before {
        content: "\e914";
    }
    .icon-import:before {
        content: "\e915";
    }
    .icon-light:before {
        content: "\e916";
    }
    .icon-magic-ai:before {
        content: "\e917";
    }
    .icon-menu:before {
        content: "\e918";
    }
    .icon-search:before {
        content: "\e919";
    }
    .icon-setting:before {
        content: "\e91a";
    }
    .icon-drag:before {
        content: "\e91b";
    }

    .icon-at:before {
        content: "\e938";
    }

    .icon-manage-column:before {
        content: "\e93a";
    }
    /** Icons END */

    .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%;
    }
    .dark .custom-select{
        background-image: url("data:image/svg+xml;utf8,<svg fill='white' 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>");
    }

    [dir="rtl"] .custom-select {
        background-position-x: calc(100% - (100% - 10px));
    }

    .label-pending,
    .label-processing,
    .label-closed,
    .label-canceled,
    .label-info,
    .label-fraud,
    .label-completed,
    .label-active {
        @apply text-[12px] text-white font-semibold py-px px-1.5 max-w-max rounded-[35px];
    }

    .history-version {
        @apply text-[12px] text-white font-semibold py-px px-2.5 max-w-max rounded-[35px];
        @apply bg-gray-600;
    }

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

	.label-processing{
		@apply bg-cyan-600;
    }

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

	.label-closed {
		@apply bg-blue-600;
	}

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

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

    /* status */
    .status-enable {
        @apply text-green-600;
    }

    .status-disable {
        @apply text-red-600;
    }

    .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%;
    }

    .dark .shimmer {
        background: linear-gradient(
            to right,
            #1f2937 8%,
            #1a2232 18%,
            #1f2937 33%
        );
    }

    @keyframes skeleton {
        0% {
            @apply bg-[-1250px_0];
        }

        100% {
            @apply bg-[1250px_0];
        }
    }

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

    .CodeMirror {
        @apply !h-[calc(100vh-367px)]
    }

    .highlighted-tribute-item {
        @apply bg-violet-100 dark:bg-cherry-600 rounded-md;
    }
}

.tox .tox-toolbar__group:last-child button {
    padding: 6px 8px;
    @apply text-violet-700 bg-violet-100;
}

.tox .tox-toolbar__group:last-child button:hover {
    @apply bg-violet-200;
}


.tox .tox-toolbar__group:last-child button[aria-disabled="true"] {
    @apply cursor-not-allowed opacity-50;
}

.tox .tox-tbtn:hover {
    @apply !bg-violet-100;
}

.multiselect__option--highlight,
.multiselect__tag,
.multiselect__spinner:after {
    @apply !bg-violet-100 dark:!bg-cherry-600;
    @apply !text-violet-600 dark:!text-slate-50;
}

.multiselect__option--selected.multiselect__option--highlight,
.multiselect__option--highlight:after {
    @apply !bg-violet-100 dark:!bg-cherry-600;;
    @apply !text-violet-600 dark:!text-slate-50;
}

.multiselect__option--highlight {
    @apply !bg-violet-100 dark:!bg-cherry-600;
    @apply !text-violet-600 dark:!text-slate-50;;

}

.multiselect__option--highlight.multiselect__option--selected.multiselect__option,
.multiselect__option--selected.multiselect__option--highlight {
    @apply !bg-violet-100 dark:!bg-cherry-600;
    @apply !text-red-600 dark:!text-red-600;
}

.multiselect__tag-icon:after {
    @apply !text-violet-600 dark:!bg-cherry-600 dark:!text-slate-50;
}

.multiselect__content-wrapper, .multiselect__tags, .multiselect__input, .multiselect__single {
    @apply bg-violet-100 dark:bg-cherry-900 dark:!text-slate-50 dark:hover:border-slate-300 dark:border-gray-600;
}