html {
    -webkit-text-size-adjust: 100%;
    /* scroll-behavior: smooth; */
    height: 100%;
}

body {
    font-size: var(--base-font-size);
    font-family: var(--font-family);
    line-height: var(--base-line-height-units);
    font-weight: var(--font-weight-regular);
    color: var(--color-secondary);
    background-color: var(--color-white);
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    min-height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

/* Overlay */
.overlay {
    display: none;
}

@media (min-width: 1024px) {
    .overlay {
        pointer-events: none;
        opacity: 0;
        cursor: pointer;
        display: block;
        background-image: linear-gradient( 180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100% );
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: var(--z-index-overlay);
    }

    .state-animates .overlay {
        transition: opacity ease 500ms;
    }

    .state-push-down-left .overlay {
        opacity: 1;
        cursor: pointer;
        pointer-events: all;
    }
}

/* RTE specefic styles */
span.display-contents,
p.display-contents,
p.display-contents-post-margin {
    display: inline;
}

    p.display-contents-post-margin::after {
        margin-bottom: 1em;
        content: '';
        display: block;
    }