.wrapper { position: relative; .toggle { appearance: none; border: 1px solid var(--container-main-border); transition: background-color linear 0.15s; background-color: var(--container-main); border-radius: 4px; width: 32px; height: 32px; cursor: pointer; &.active, &:hover, &:focus-visible { background-color: var(--container-main-secondary); } &.active { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } &::after { content: '⁝'; font-weight: bold; font-size: 1.25rem; } } .dropdown { position: absolute; display: flex; flex-direction: column; top: 100%; min-width: 140px; background-color: var(--container-main); border: 1px solid var(--container-main-border); border-radius: 4px; a, button { appearance: none; border: 0; background: transparent; transition: background-color linear 0.15s; font-size: 1rem; text-align: left; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--container-main-border); cursor: pointer; &:hover, &:focus-visible { background-color: rgb(240, 240, 240); } &:last-child { border-bottom: 0; } } } &.right { .dropdown { right: 0; border-top-right-radius: 0; } } &.left { .dropdown { left: 0; border-top-left-radius: 0; } } }