@taiga-ui/kit/styles/components/compass.less

Taiga UI Angular main components kit

@import '@taiga-ui/core/styles/taiga-ui-local.less';

/**
 * @name Compass
 * @selector tui-compass
 *
 * @description
 * A compass arrow for the map
 *
 * @vars
 * --t-degrees — rotation
 *
 * @example
 * <tui-compass style="--t-degrees: 45deg"></tui-compass>
 *
 * @see-also
 * Pin
 */
tui-compass {
    position: relative;
    display: inline-block;
    color: var(--tui-background-accent-1);
    border-radius: 50%;
    inline-size: 1rem;
    block-size: 1rem;
    border: 0.1875rem solid var(--tui-background-base);
    box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d; // z-index doesn't work on pseudo-element

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0.125rem;
        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 8.99993C4 8 8 8 12 8.99993C9.91509 5.73239 8.5 3 6 0C3.5 3 2 5.5 0 8.99993Z"/></svg>');
        transform: rotate(var(--t-degrees)) translateY(-0.625rem) translateZ(-1rem);
        inline-size: 0.75rem;
        block-size: 1rem;
        background: currentColor;
    }

    &::after {
        .fullsize(absolute, inset);

        content: '';
        border-radius: inherit;
        background: currentColor linear-gradient(-45deg, rgba(0, 0, 0, 0.2), transparent);
    }
}