$font-path: "https://webassets.iota.org/fonts/" !default;

@import "./fonts/inter.scss";
@import "./fonts/metropolis.scss";

$fallback-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$metropolis: "Metropolis", $fallback-fonts;
$metropolis-light: "Metropolis Light", $fallback-fonts;
$metropolis-medium: "Metropolis Medium", $fallback-fonts;
$metropolis-semi-bold: "Metropolis Semi Bold", $fallback-fonts;
$metropolis-bold: "Metropolis Bold", $fallback-fonts;

$inter: "Inter", $fallback-fonts;

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

/* General style */

:root {
    --grid-number-columns: 12;
    --grid-number-columns-tablet: 8;
    --grid-number-columns-mobile: 4;
    --grid-width-columns: 64px;
    --grid-width-column-spacer: 24px;
}

html {
    font-family: "Inter", sans-serif;
    @apply text-base leading-normal text-grey-10pm;
}

// body {
//     height: 100vh;
//     perspective: 1px;
//     transform-style: preserve-3d;
//     overflow-x: hidden;
//     overflow-y: auto;
// }

.body {
    letter-spacing: 0.04em;
    &.small {
        letter-spacing: 0.02em;
        @apply text-xs leading-relaxed;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Metropolis Bold";
    @apply text-grey-midnight leading-tight tracking-normal capitalize;

    &.light {
        font-family: "Metropolis Regular";
    }

    b {
        font-weight: inherit;
    }
}

h1 {
    @apply text-5xl;
    &.alt {
        @apply text-4xl;
    }
}

h2 {
    @apply mb-4;
    font-size: 2rem;
}

h3 {
    @apply mb-4;
    font-size: 1.75rem;
}

h4,
h5,
h6 {
    @apply text-xl mb-3;
}

@screen md {
    h1 {
        @apply text-6xl;
        &.alt {
            @apply text-5xl;
        }
        strong,
        b {
            @apply font-normal;
            font-family: "Metropolis Bold";
        }
    }

    h2 {
        @apply text-4xl;
    }

    h3 {
        @apply text-3xl;
    }

    h4,
    h5,
    h6 {
        @apply text-xl;
    }
}

// remove focus/active border on buttons and clickable elements TODO: ADD A FOCUS STATE REPLACEMENT FOR THIS
button:focus,
a:focus,
.cursor-pointer:focus {
    outline: none;
}

p + p,
* + ul {
    @apply mt-6;
}

p:empty {
    display: none;
}

.Media .intercalated img {
    @apply p-4;

    @screen md {
        @apply p-0;
    }
}

.subheadline {
    font-family: "Metropolis Medium";
    @apply text-base leading-normal text-grey-midnight;
}

.headline-stick {
    height: 4px;
    @apply bg-green-highlight mb-5;
    // default
    width: 16px;

    &.size-s {
        width: 24px;
    }
    &.size-m {
        width: 48px;
    }
    &.size-l {
        width: 80px;
    }
    &.size-xl {
        width: 120px;
    }
    &.size-xxl {
        width: 160px;
    }
}

.blue-circle {
    @apply bg-green-highlight rounded-full opacity-25;

    &.size-s {
        width: 74px;
        height: 74px;
    }

    &.size-m {
        width: 104px;
        height: 104px;
    }

    &.size-l {
        width: 118px;
        height: 118px;
    }

    &.size-xl {
        width: 152px;
        height: 152px;
    }
}

// Layout

// .content {
//   overflow: hidden;
// }

@responsive {
    .container {
        @apply my-0 mx-auto px-4;
        width: 100%;
        // max-width: calc(
        //     var(--grid-width-columns) * var(--grid-number-columns-mobile) + (var(--grid-number-columns-mobile) - 1) *
        //         var(--grid-width-column-spacer) + 2rem
        // );
        @screen md {
            max-width: calc(
                var(--grid-width-columns) * var(--grid-number-columns-tablet) + (var(--grid-number-columns-tablet) - 1) *
                    var(--grid-width-column-spacer) + 2rem
            );
        }

        @screen lg {
            max-width: calc(
                var(--grid-width-columns) * var(--grid-number-columns) + (var(--grid-number-columns) - 1) *
                    var(--grid-width-column-spacer) + 2rem
            );
        }
    }
}

// IOTA custom theme classes

.bg-green-gradient {
    background: linear-gradient(315deg, theme("colors.green.highlight") 8.22%, theme("colors.green.default") 100.99%);
}

.bg-midnight-gradient {
    background: linear-gradient(225deg, theme("colors.grey.10pm") 0%, theme("colors.grey.midnight") 100%);
}

.hover-drop-shadow {
    box-shadow: 0px 8px 24px rgba(132, 147, 173, 0.6);
}

// animation classes
// this class is for the element that contains the text to be animated
.letters-from-blur {
    opacity: 0;
    will-change: opacity, filter, transform;
}

// element appears from blur, this class is applied to every span with a letter
.element-from-blur {
    opacity: 0;
    will-change: opacity, filter, transform;
}

.element-from-blur-animate {
    animation: element-from-blur-animate 1s normal forwards;
    animation-delay: 0s;
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0, 0, 0);
    transform: translateZ(0);
}

@keyframes element-from-blur-animate {
    from {
        filter: blur(30px);
        opacity: 0;
    }
    to {
        filter: blur(0);
        opacity: 1;
    }
}

// elements fades in from bottom to top
.fade-in-bottom:not(.incompatible) {
    transform: translate3d(0, 10px, 0);
    opacity: 0;
    transition: all 0.3s linear, background 0s;
}

.fade-in-bottom-animate:not(.incompatible) {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.fade-in-bottom-bigger:not(.incompatible) {
    transform: translate3d(0, 50px, 0);
    opacity: 0;
    transition: all 1s linear;
}

.fade-in-bottom-bigger-animate:not(.incompatible) {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

// elements fades in
.fade-in {
    opacity: 0;
    transition: all 0.3s linear, background 0s;
}

.fade-in-animate {
    opacity: 1;
}

// place holder animation
.placeholder-animation {
    animation: placeholder-pulse 0.6s infinite alternate ease-in-out;
}

@keyframes placeholder-pulse {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}

// override selection color
::-moz-selection {
    /* Code for Firefox */
    background: #80efe4;
}

::selection {
    background: #80efe4;
}

// nprogress
#nprogress {
    pointer-events: none;
}

#nprogress .bar {
    @apply bg-green-highlight;
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

/* Fancy blur effect */
#nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
    opacity: 1;

    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 15px;
    right: 15px;
}

#nprogress .spinner-icon {
    width: 18px;
    height: 18px;
    box-sizing: border-box;

    border: solid 2px transparent;
    border-top-color: #00e0ca;
    border-left-color: #00e0ca;
    border-radius: 50%;

    -webkit-animation: nprogress-spinner 400ms linear infinite;
    animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
    overflow: hidden;
    position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
    position: absolute;
}

@-webkit-keyframes nprogress-spinner {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes nprogress-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}