@import "helpers";

@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

html {
    width: 100vw;
}

html, body {
    overflow-x: hidden;
}

body {
    width: 100%;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.splide__arrow svg {
    fill: $accent_colour !important;
}

.splide__pagination__page.is-active {
    background-color: $accent_colour !important;
}

.splide__arrow.splide__arrow--next {
    height: 5em !important;
    width: 5em !important;
}

.splide__arrow.splide__arrow--prev {
    height: 5em !important;
    width: 5em !important;
}

.splide__slide {
    display: flex;
}

.accordion-content-enter {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.accordion-content-enter-active {
    opacity: 1;
    height: auto;
    transition: opacity 300ms, height 300ms;
}

.accordion-content-exit {
    opacity: 1;
    height: auto;
}

.accordion-content-exit-active {
    opacity: 0;
    height: 0;
    transition: opacity 300ms, height 300ms;
    overflow: hidden;
}

.accordion-header {
    text-align: center;
}