@import 'tailwindcss';

@plugin "tailwindcss-motion";

@config '../tailwind.config.js';

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentcolor);
    }

    a {
        /*@apply typography;*/
        @apply text-active;
        text-decoration: underline;
    }
}


@utility typography {
    -webkit-text-stroke: 0.025em black;
    color: white;
    font-weight: bold;
    strong {
        color: orange;
    }
}

body {
    line-height: 1;
    position: relative;
    margin: 0;;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Hide scrollbar - for some reason its visible on Singing Scene (todo investigate why its that) */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    overflow-y: auto;
}


body,
button,
input {
    font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}

html {
    overflow: overlay;
    overflow-x: hidden;

    font-size: 2px;
    @media (min-width: 560px) {
        font-size: 3.25px;
    }
    @media (min-width: 720px) {
        font-size: 4px;
    }
    @media (min-width: 1280px) {
        font-size: 6.5px;
    }
    @media (min-width: 1920px) {
        font-size: 10px;
    }
    @media (min-width: 2560px) {
        font-size: 13.5px;
    }
    @media (min-width: 3840px) {
        font-size: 20px;
    }

    /*font-size: calc(min(0.9259259259259vh, 0.5208333333333vw) * var(--zoom-multipler, 1));*/
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.blockOverflow {
    overflow: hidden;
}

.Toastify {
    font-size: 1.5rem;
    --toastify-toast-width: 32rem;
    --toastify-toast-min-height: 6.4rem;
    --toastify-toast-max-height: 80rem;
}

.Toastify__toast {
    padding: 0.8rem;
    border-radius: 0.4rem;
}

.Toastify__toast-body {
    padding: 0.6rem;
}

.Toastify__toast-icon {
    width: 1.5rem;
    margin-inline-end: 1rem;
}

.Toastify__close-button > svg {
    width: 1.5rem;
    height: 1.5rem;
}

.Toastify__progress-bar {
    height: 0.5rem;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes scale-from-down {
    from {
        transform: scale(0.8);
    }
}

@keyframes scale-to-up {
    to {
        transform: scale(1.2);
    }
}

::view-transition-old(menu-container) {
    animation: 210ms ease-in-out both fade-out, 300ms ease-in-out both scale-to-up;
}

::view-transition-new(menu-container) {
    animation: 210ms ease-in-out 90ms both fade-in, 300ms ease-in-out both scale-from-down;
}

::view-transition-old(song-preview),
::view-transition-new(song-preview) {
    /* Prevent the default animation,
    so both views remain opacity:1 throughout the transition */
    animation: none;
    /* Use normal blending,
    so the new view sits on top and obscures the old view */
    mix-blend-mode: normal;
    /* Make the height the same as the group,
    meaning the view size might not match its aspect-ratio. */
    height: 100%;
    /* Clip any overflow of the view */
    overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(song-preview) {
    /* Maintain the aspect ratio of the view,
    by shrinking it to fit within the bounds of the element */
    object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(song-preview) {
    /* Maintain the aspect ratio of the view,
    by growing it to cover the bounds of the element */
    object-fit: cover;
}

@keyframes focusAnimation {
    100% {
        box-shadow: inset 0px 0px 0px 2px orange;
    }
    50% {
        box-shadow: inset 0px 0px 0px 4px orange;
    }
    0% {
        box-shadow: inset 0px 0px 0px 2px orange;
    }
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}
