.main-container {
    padding: $spacing-3;
}

.menu {
    padding: $spacing-2 $spacing-2;
    margin-bottom: $spacing-3;

    @include with-theme {
        background-color: color-for(primary);
        color: color-for(text-on-primary);
    }
}

.menu-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    @include on-mobile {
        display: block;
    }
}

.menu-header {
    flex-grow: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.menu-title-container {
    flex: 1;
}

.menu-title {
    margin: 0pt $spacing-2;
    font-size: $large-font-size;
    font-weight: bold;
    text-decoration: none;
    color: inherit !important;
    &:hover {
        text-decoration: underline;
    }
}

.menu-dropdown-controls {
    > .icon-button {
        margin: 0pt;
        @include with-theme {
            color: color-for(text-on-primary);
        }
    }
}

.menu-dropdown {
    @include not-on-mobile {
        flex: 1 !important;
        display: flex !important;
        flex-direction: row !important;
    }
    @include on-mobile {
        display: none;
        text-align: right;
    }
}

.menu-links {
    // Spacing and alignment
    margin: 0pt;
    padding: 0pt;
    list-style-type: none;

    // Align
    flex: 1;
    display: flex;
    align-items: center;
    @include on-mobile {
        display: block;
    }

    // List element styling
    & > li {
        // Spacing
        margin: 0pt $spacing-2;
        @include on-mobile {
            margin: $spacing-2;
        }
        > a {
            color: inherit !important;
            text-decoration: none;
            font-size: $normal-font-size;
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

.menu-controls {
    // Align
    display: flex;
    flex-direction: row-reverse;
    align-items: center;

    .icon-button {
        padding: $spacing-1;
        font-size: $medium-font-size;
        @include with-theme {
            color: color-for(text-on-primary);
        }
    }
}