.layout {
    min-height: 100vh;
}

.layout--connected .layout__header {
    --layout-header-background: var(--color-caribbean);

    position: fixed;
    z-index: 100;
    bottom: 0;

    width: 100%;
    height: var(--height-header);

    background-color: var(--layout-header-background);
    box-shadow: 0 0 5px var(--color-grey-4);
}

@media (min-width: 800px) {
    .layout--connected .layout__header {
        position: static;

        height: auto;

        background-color: var(--layout-header-background);
        box-shadow: none;
    }

    .layout--blocked .layout__header {
        background: none;
    }

    .layout--connected:not(.layout--blocked) .layout__header {
        margin-bottom: var(--space-medium);
    }
}

.layout--connected .layout__header .header__link {
    width: 5.5rem;
    padding: var(--space-small);

    text-align: center;
    text-decoration: none;

    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
}

@media (min-width: 800px) {
    .layout--connected .layout__header .header__link {
        width: auto;
    }
}

.layout--connected .layout__header .header__link--active {
    font-weight: bold;

    border-bottom-color: var(--color-background);
}

.layout__main {
    max-width: var(--width-content);
    min-height: 60vh;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 800px) {
    .layout__main {
        margin-bottom: 0;
    }
}

.layout__main:focus {
    outline: 0;
}

.layout__back a {
    --outline-offset: -3px;

    overflow: hidden;

    display: inline-block;
    max-width: 100%;
    padding-top: var(--space-medium);
    padding-right: var(--space-medium);
    padding-bottom: var(--space-medium);

    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;

    border-radius: var(--border-radius);
}

@media (min-width: 800px) {
    .layout--connected:not(.layout--blocked) .layout__back {
        margin-top: calc(var(--space-medium) * -1);
    }
}

.layout__search {
    position: relative;

    margin-right: var(--space-smaller);
    margin-left: var(--space-smaller);
    padding-top: var(--space-medium);
}

@media (min-width: 800px) {
    .layout__search {
        max-width: 700px;
        margin-right: auto;
        margin-left: auto;
    }
}

.layout__back + .layout__search {
    padding-top: 0;
}

@media (min-width: 800px) {
    .layout--connected:not(.layout--blocked) .layout__search {
        margin-top: calc(var(--space-medium) * -1);
    }

    .layout--connected:not(.layout--blocked) .layout__back + .layout__search {
        margin-top: 0;
    }
}

.layout__search input[type="text"] {
    padding-right: calc(1.5em + 2 * var(--space-medium));

    box-shadow: 0 1px 4px 1px var(--color-grey-1);
    border-color: var(--color-border-search);
}

.layout__search input[type="text"]:hover {
    box-shadow: 0 1px 4px 1px var(--color-grey-2);
}

.layout__search button {
    position: absolute;
    right: 0;
}

.layout__search button:hover {
    border-color: transparent;
}

.layout__search button .icon {
    fill: var(--color-grey-5);
}

.layout__search button:hover .icon {
    fill: var(--color-text);
}

.layout__content {
    padding: var(--space-medium) var(--space-smaller) var(--space-large);

    background-color: var(--color-white);
    box-shadow: 0 1px 2px 1px var(--color-grey-2);
}

.layout--connected .layout__content {
    min-height: calc(100vh - var(--height-header));
    padding-bottom: calc(var(--height-header) + var(--space-large));
}

@media (min-width: 800px) {
    .layout__content {
        padding-right: var(--space-large);
        padding-left: var(--space-large);

        border-radius: var(--border-radius);
    }

    .layout__content--touch-bottom {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .layout--connected .layout__content {
        min-height: auto;
        padding-bottom: var(--space-large);
    }
}

.layout__footer {
    padding: var(--space-large);

    text-align: center;
}

.banner__container {
    display: block;
    padding: var(--space-small);

    color: var(--color-pampas);
    font-weight: bold;
    text-align: center;

    background-color: var(--color-accent-text);
}

.layout__banner--alert .banner__container {
    background-color: var(--color-danger-solid);
}

.banner__container--anchor {
    transition: background-color 0.3s ease-in-out;
}

.banner__container--anchor:hover,
.banner__container--anchor:focus {
    color: var(--color-pampas);

    background-color: var(--color-accent-text-contrast);
}

.layout--error {
    text-align: center;
}

.layout--error .layout__header {
    padding: var(--space-larger) var(--space-medium);
}

.layout--error .layout__link {
    font-size: var(--size-large);
    text-decoration: none;
}

.layout--error .layout__main {
    max-width: 800px;
}

.layout--error__box {
    position: absolute;
    right: 0;
    left: 0;

    overflow: auto;

    padding: var(--space-medium) var(--space-large);

    color: var(--color-white);
    text-align: left;

    background-color: var(--color-rangoon);
}
