.dropdown-menu { z-index: 9999; position: absolute; background: $gab-background-container; border-radius: 4px; border: 1px solid $gab-placeholder-accent; padding: 4px 0; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); &.left { transform-origin: 100% 50%; } &.top { transform-origin: 50% 100%; } &.bottom { transform-origin: 50% 0; } &.right { transform-origin: 0 50%; } &__arrow { position: absolute; border: 0 solid transparent; @include size(0); &.left { right: -5px; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: $gab-placeholder-accent; } &.top { bottom: -5px; margin-left: -5px; border-width: 5px 5px 0; border-top-color: $gab-placeholder-accent; } &.bottom { top: -5px; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: $gab-placeholder-accent; } &.right { left: -5px; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: $gab-placeholder-accent; } } ul { overflow: hidden; padding: 6px 0; } &__item a { display: block; box-sizing: border-box; padding: 3px 10px 1px; text-decoration: none; text-transform: capitalize; color: $gab-secondary-text; @include text-overflow(nowrap); @include text-sizing(13px, 400, 26px); &:focus, &:hover, &:active { outline: 0; color: $gab-text-highlight; background: $gab-background-base !important; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); } } &__separator { display: block; margin: 10px !important; height: 1px; background: $gab-background-base; } }