@import url('../../../node_modules/react-tippy/dist/tippy.css');

@import url('vars.css');
@import url('media.css');
@import url('ui/ui.css');

@import url('alert/alert.css');
@import url('contact-modal/contact-modal.css');

/* Define our icon font. */
@font-face {
    font-family: Icons;
    src: url('/font/icomoon.ttf');
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Zilla Slab has a limited glyph support range so switch to
   Noto in known cases */
html[lang='ab'],
html[lang='cv'],
html[lang='ff'],
html[lang='ky'],
html[lang='ro'],
html[lang='gn'] {
    --strong-font-family: 'Noto Serif', serif;
}

/* Fonts that support arabic script generally don't support any other
   extended alphabet, so fall back to sans-serif to avoid loading more fonts */
html[lang='ckb'] {
    --strong-font-family: 'Open Sans', sans-serif;
}

/* Fulah and Romanian are not supported by Open Sans */
html[lang='ro'],
html[lang='ff'],
html[lang='az'] {
    --base-font-family: 'Inter', sans-serif;
}

html {
    font-family: var(--base-font-family);
    font-size: var(--font-size);
    color: var(--black);
    background-color: var(--white);
}

html,
body,
#main {
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 100%;
}

#main.write,
#main.review {
    @media (--md-down) {
        height: auto;
    }
}

#main {
    &.nav-modal-active {
        @media (--lg-down) {
            overflow-y: hidden;
            height: 100vh;

            & .header {
                display: flex;
            }
        }

        .secondary-nav {
            display: none;
        }
    }
}

h1,
h2,
h3,
h4 {
    font-family: var(--strong-font-family);
}

h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.5rem;
    font-weight: normal;
}

a {
    outline: none;
    text-decoration: none;
    color: var(--black);
}

p,
h1,
h2,
h3,
h4 {
    margin: 0;
    padding: 0;
}

a:active {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.link {
    text-decoration: underline;

    &:hover {
        color: var(--blue);
    }
}

button {
    background: none;
    cursor: pointer;
}

.js-focus-visible :focus:not(.focus-visible),
.js-focus-visible :focus-within:not(.focus-visible) {
    outline: none;
}

.js-focus-visible .focus-visible {
    outline: 1px solid black;
}

/* Icon font element. */
[data-icon]::before {
    font-family: Icons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
    font-size: 200%;
    content: attr(data-icon);
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.strong {
    font-family: var(--strong-font-family);
    font-weight: bold;
}

#main {
    position: relative;
    background-color: var(--white);

    display: flex;
    flex-direction: column;

    &.speak,
    &.listen,
    &.write,
    &.review {
        max-height: calc(100dvh - 2px);
        height: 100vh;

        & header {
            @media (--lg-down) {
                display: none;
            }
        }

        #content {
            min-height: 70%;
        }
    }

    &.write,
    &.review {
        @media (--md-down) {
            overflow: auto;
        }
    }

    &.datasets {
        .menu-list {
            box-shadow: none;
        }
    }
}

/**
 * We have two different page transition types:
 * one for desktop and one for mobile.
 */
@keyframes slide-fade-in {
    from {
        transform: translateY(100vh);
        opacity: 0;
    }
    80% {
        opacity: 0.1;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#content {
    display: flex;
    flex-grow: 1;
    width: 100%;
    min-height: 100%;

    &.write,
    &.review {
        @media (--sm-down) {
            min-height: auto;
        }
    }

    &.review {
        & .spinner--floating {
            position: fixed;
        }
    }
}

.Logo {
    @media (--md-up) {
        margin-inline-end: var(--standard-margin);
        width: 10rem;
    }

    @media (--xl-up) {
        margin-inline-end: 4rem;
    }

    @media (--lg-only) {
        margin-inline-end: 1rem;
    }

    &,
    & .LogoImage {
        height: 100%;
    }
}

.loading {
    animation: loading 2.5s ease infinite;
    background-size: 600% 600%;
}

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

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

.title-and-action {
    margin-bottom: var(--standard-margin);
    display: flex;
    justify-content: space-between;
    align-items: center;

    & a,
    & button {
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-decoration: underline;
    }
}

.opt-in {
    display: flex;
    font-size: var(--font-size-xs);

    & input {
        margin: 0.1rem 0.3rem 0.1rem 0.1rem;
        width: 100%; /* mobile Safari needs this */
        max-width: 0.8rem;
        height: 0.8rem;
    }
}

.opt-in input:checked {
    background: black;
}

.small {
    font-size: var(--font-size-xs);
    color: var(--near-black);
}

a.small,
.small a,
.text-button.small {
    text-decoration: underline;
}

.tippy-popper {
    & .tippy-tooltip {
        border-radius: 20px;
        padding: 9px 25px;
        max-width: 200px;
        line-height: 1.5;
        font-size: var(--font-size-xs);
        font-style: italic;
        letter-spacing: 0.8px;
        background: var(--near-black);
        color: var(--white);
    }

    & .arrow-regular {
        border-top-color: var(--near-black) !important;
    }
}

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

.upload-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    z-index: var(--override-z-index);
    background: linear-gradient(270deg, #e5868b, #a2a4d1);
    background-size: 400% 400%;
    animation: move-background 2s ease infinite;
    transition: width var(--transition-duration-slow) var(--easing),
        opacity var(--transition-duration-slow) linear
            var(--transition-duration-slow),
        background var(--transition-duration) linear;
}

.notifications {
    position: fixed;
    top: 60px;
    z-index: var(--override-z-index);
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
