:root {
    --mantine-font-family-headings: Raleway;
    --mantine-font-family: Open Sans;
    --mantine-h1-font-weight: 300;
    --mantine-h2-font-weight: 600;
    --mantine-h3-font-weight: 600;
    --mantine-h4-font-weight: 500;
    --mantine-h5-font-weight: 700;
    --mantine-h6-font-weight: 700;
    --infine-blue: #003366;
    --infine-blue-bright: #006BD6;
    --infine-blue-light: #91B0D4;
    --infine-blue-light-fade: #DAE5F1;
    --infine-gray: #708090;
    --infine-green-dark: #4F7942;
    --infine-green-fade: #D8E8D4;
    --infine-green-lite-fade: #E2ECD0;
    --infine-green-lite-fade2: rgb(from var(--infine-green-lite-fade) r g b / 0.3);
    --infine-yellow-fade: #F6E9CA;
    --infine-red: #D96666;
    --infine-red-fade: #F2D9D9;
    --infine-spacing-xxs: calc(0.5rem * var(--mantine-scale));

    /* These have higher specificity in mantine css, so won't work on plain :root */
    &[data-mantine-color-scheme='light'] {
        --mantine-color-text: #404040;
    }
}

html {
    scroll-behavior: smooth;
}

.mantine-AppShell-main {
    --app-shell-padding: 1rem;
    @media (min-width: 48rem) {
        --app-shell-padding: 1.25rem;
    }
    @media (min-width: 75rem) {
        --app-shell-padding: 3.75rem;
    }
}

.infine-navlink {
    font-size: var(--mantine-font-size-xl);
    color: #1A73E8;
    padding: 8px var(--mantine-spacing-sm);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
        background-color: var(--mantine-primary-color-light-hover);
    }

    img {
        margin-inline-end: var(--mantine-spacing-sm);
    }
}

.mainNav {
    padding: 0 var(--mantine-spacing-xl);
    border-bottom: 4px solid var(--infine-green-lite-fade);

    .mantine-Tabs-list {
        color: var(--infine-green-dark);
        /* Counter root component bottom border to paint border on top */
        margin-bottom: -4px;
    }

    .mantine-Tabs-list::before {
        border-bottom: 0px none;
    }

    .mantine-Tabs-tab {
        /* box-sizing is border-box, so the actual size after padding and margins is 72-12-12-8=40 as in figma */
        height: 72px;
        padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
        border-bottom: 8px solid transparent;

        &[data-active] {
            color: var(--infine-blue);
            border-bottom: 8px solid var(--infine-blue);
        }
    }
    .mantine-Tabs-tabLabel {
        font-family: "Raleway";
        font-weight: 700;
        font-size: var(--mantine-font-size-md);
    }
}

.evaluationNav {
    background-color: var(--infine-green-lite-fade2);
    padding: 10px var(--mantine-spacing-xl);

    .mantine-Tabs-list {
        color: var(--infine-blue);
        gap: 10px;
    }
    .mantine-Tabs-tab {
        padding: var(--infine-spacing-xxs) var(--mantine-spacing-sm);
    }
    .mantine-Tabs-tabLabel {
        font-family: "Raleway";
        font-weight: 400;
        font-size: var(--mantine-font-size-sm);
    }
}

#sticky-bar {
    transition-property: background-color border-color;
    transition-duration: 0.8s;
    transition-timing-function: ease;
    background-color: white;
    /* Need an "invisible" border of same thickness or transition is wonky */
    border-bottom: 4px solid white;
    color: var(--mantine-color-gray-6);

    .mantine-Select-root {
        flex-grow: 1;

        input::placeholder {
            color: black;
        }
    }

    #gtin-search {
        flex-grow: 0;
        width: 14em;
    }
}

.intersection-nav {
    transition-property: color;
    transition-duration: 2s;
    transition-timing-function: ease;
    color: var(--mantine-color-gray-6);
    text-decoration: none;

    &.highlight {
        color: var(--infine-blue);
    }
}

#sticky-bar.stuck {
    /* Custom color, not used elsewhere so not in palette */
    background-color: #F6F9F1;
    border-bottom: 4px solid var(--infine-green-dark);
}

button.chevron {
    transition-property: rotate;
    transition-duration: 0.5s;

    &.closed {
        rotate: -90deg;
    }
}

.small-criteria-box:nth-child(odd) {
    grid-column: 3;
}

.small-criteria-box:nth-child(even) {
    grid-column: 4;
}

.catalogue-product {
    margin-left: auto;

    &.mantine-SegmentedControl-root {
        background-color: var(--infine-green-lite-fade2);
    }

    .mantine-SegmentedControl-control {
        span {
            font-size: var(--mantine-font-size-xs);
            font-weight: 400;
        }

        .mantine-SegmentedControl-label {
            color: var(--infine-green-dark);
        }
        &[data-active] {
            .mantine-SegmentedControl-label {
                color: var(--infine-blue);
            }
        }
    }
}

.h2 {
    color: var(--infine-blue);
    font-family: var(--mantine-font-family-headings);
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
}

.h3 {
    font-family: var(--mantine-font-family-headings);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.h4 {
    font-family: var(--mantine-font-family-headings);
    font-size: var(--mantine-font-size-xl);
    font-weight: 500;
    line-height: 24px;
}