.ui-arrow {
    --arrow-rotation: 0deg;
    display: inline-block;
    position: relative;
    width: 0.95em;
    height: 0.95em;
    flex: 0 0 auto;
    color: currentColor;
    vertical-align: -0.08em;
    transform: rotate(var(--arrow-rotation));
    transition: transform 180ms ease;
}

.ui-arrow::before {
    content: '';
    position: absolute;
    left: 0.08em;
    right: 0.08em;
    top: calc(50% - 0.075em);
    height: 0.15em;
    border-radius: 999px;
    background: currentColor;
}

.ui-arrow::after {
    content: '';
    position: absolute;
    right: 0.08em;
    top: 50%;
    width: 0.42em;
    height: 0.42em;
    border-top: 0.15em solid currentColor;
    border-right: 0.15em solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
}

.ui-arrow--up-right { --arrow-rotation: -45deg; }
.ui-arrow--down { --arrow-rotation: 90deg; }
.ui-arrow--left { --arrow-rotation: 180deg; }

a:hover .ui-arrow,
button:hover .ui-arrow {
    transform: rotate(var(--arrow-rotation)) translateX(0.14em);
}

.membership-row:hover .membership-arrow.ui-arrow {
    transform: rotate(var(--arrow-rotation)) translateX(0.14em);
}

@media (max-width: 720px) {
    .ui-arrow {
        width: 1.05em;
        height: 1.05em;
        vertical-align: -0.12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-arrow { transition: none; }
}