.page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;

    & .page {
        flex-grow: 1;

        & .nuxt-page-wrapper {
            height: 100%;
            justify-content: space-between;
        }
    }
}

.filter-bar {
    background: var(--color-lightest);
    display: flex;
    justify-content: space-between;
    padding: var(--padding-default);

    & > button {
        all: unset;
        cursor: pointer;
        color: var(--color-main-darkest);
        font-weight: bolder;
        font-family: 'Roboto', sans-serif;

        &.active {
            color: var(--color-main-darkest);
        }

        &:not(.active) {
            opacity: .5;
        }
    }
}

.search-bar {
    z-index: 100;

    & p {
        font-weight: 100;
        color: var(--color-lightest);
    }
}

.content {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
    background: var(--color-lightest);
    height: 100%;
}

.info-text {
    padding: 0 var(--padding-default);
    text-align: center;
    width: 100%;
    top: 40%;
    transform: translateY(-50%);
    position: absolute;
}