.menu {

margin: $spacing-2;
padding: $spacing-2;
border-radius: $spacing-2;

@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;
}

}

.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);
    }
}

}