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

@layer base {
    html {
        font-family: acumin-pro, sans-serif;
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    html.dark {
        background-color: #202225;
    }
}

* {
    user-select: none;
}

::-webkit-scrollbar {
    width: 4px !important;
    padding: 0;
    margin: 0;
    display: inline;
}

.download-progress {
    background-size: 500% !important;
    animation: rainbow 2s linear 0s infinite;
}

.spin-loading {
    animation: spin-loading 2s cubic-bezier(0.46, -0.55, 0.49, 1.52) 0s forwards infinite;
}

.glow-on-hover {
    border-radius: 10px;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -4px;
    left: -4px;
    background-size: 400%;
    z-index: -1;
    filter: blur(3px);
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    animation: glowing 20s linear infinite;
}

.dim > * {
    z-index: 1;
}
.dim::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
}

.dim-on-hover:hover > * {
    z-index: 1;
}
.dim-on-hover:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
}

.scrollbar-default {


    &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

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

    &::-webkit-scrollbar-thumb {
        background-color: rgb(23 23 23 / var(--tw-bg-opacity));
        border-radius: 999px;
      }
}

.tippy-box[data-theme~='default'] {
    @apply bg-neutral-900;
    @apply text-white;
}

.tippy-box[data-theme~='default'][data-placement^='top'] > .tippy-arrow::before {
    @apply border-t-neutral-900;
}
.tippy-box[data-theme~='default'][data-placement^='bottom'] > .tippy-arrow::before {
    @apply border-b-neutral-900;
}
.tippy-box[data-theme~='default'][data-placement^='left'] > .tippy-arrow::before {
    @apply border-l-neutral-900;
}
.tippy-box[data-theme~='default'][data-placement^='right'] > .tippy-arrow::before {
    @apply border-r-neutral-900;
}

.bg-theme-1 { @apply bg-light-main-color-1 dark:bg-main-color-1; }
.bg-theme-2 { @apply bg-light-main-color-2 dark:bg-main-color-2; }
.bg-theme-3 { @apply bg-light-main-color-3 dark:bg-main-color-3; }
.\!bg-theme-1 { @apply !bg-light-main-color-1 dark:!bg-main-color-1; }
.\!bg-theme-2 { @apply !bg-light-main-color-2 dark:!bg-main-color-2; }
.\!bg-theme-3 { @apply !bg-light-main-color-3 dark:!bg-main-color-3; }

@keyframes glowing {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

@keyframes spin-loading {
    0% {
        transform: rotate(-360deg);
    }
    50% {
        transform: rotate(-360deg);
    }
}

@keyframes rainbow {
    0% {
        background-position: 84% 0;
    }
    100% {
        background-position: 0 0%;
    }
}