@import "variables"; @mixin menu { position: absolute; background: var(--background); box-shadow: var(--shadow); color: white; border: 2px solid; margin: 0; padding: 10px; list-style: none; z-index: 99; } .header { display: flex; flex-direction: column; position: relative; &__inner { display: flex; align-items: center; justify-content: space-between; } .menu { margin: 20px 0; &__inner { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; li { &.active { color: var(--accent-alpha-70); } &:not(:last-of-type) { margin-right: 20px; margin-bottom: 10px; flex: 0 0 auto; } } } &__sub-inner { position: relative; list-style: none; padding: 0; margin: 0; &:not(:only-child) { margin-left: 20px; } &-more { @include menu; top: 35px; left: 0; &-trigger { color: var(--accent); user-select: none; cursor: pointer; } li { margin: 0; padding: 5px; white-space: nowrap; } } } } }