.nav { width: 100%; padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem; padding-left: #{33 / $base-font-size}rem; display: flex; flex-direction: row; justify-content: space-between; font-size: #{12 / $base-font-size}rem; } .nav__items-left, .nav__items-right { @include themify() { border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color'); } list-style: none; display: flex; flex-direction: row; justify-content: flex-end; padding: #{5 / $base-font-size}rem #{10 / $base-font-size}rem; } .nav__item { position: relative; min-width: #{72 / $base-font-size}rem; text-align: center; } .nav__dropdown { @include themify() { background-color: map-get($theme-map, 'background-color'); border: 1px solid map-get($theme-map, 'ide-border-color'); } @extend %hidden-element; & li + li { margin-top: #{10 / $base-font-size}rem; } width: #{140 / $base-font-size}rem; .nav__item:hover & { display: flex; position: absolute; flex-direction: column; padding: #{10 / $base-font-size}rem; left: #{-10 / $base-font-size}rem; height: auto; } }