.dropdown-pane { @include elegant-card; @include border-light; box-sizing: content-box; width: fit-content; z-index: var(--z-index-very-high); &.dropdown-pane--open { display: block; visibility: visible; } &.dropdowm--bottom { &::before { @include arrow(top, var(--color-border-light), 14px); position: absolute; right: 6px; top: -14px; } &::after { @include arrow(top, $color-white, var(--space-slab)); position: absolute; right: var(--space-small); top: -12px; } } &.dropdowm--top { &::before { @include arrow(bottom, var(--color-border-light), 14px); bottom: -14px; position: absolute; right: 6px; } &::after { @include arrow(bottom, $color-white, var(--space-slab)); bottom: -12px; position: absolute; right: var(--space-small); } } }