@use '../function' as *;
@use '../mixin';

@mixin roolith-tag() {
    .tag {
        font-size: rem(12);
        line-height: 1em;
        display: inline-flex;
        align-items: center;
        gap: rem(6);
        background: var(--r-tag-background);
        border: rem(1) solid var(--r-tag-border-color);
        color: var(--r-tag-text-color);
        padding: rem(5) rem(10);
        border-radius: rem(25);
    }

    .tag-close {
        display: inline-block;
        border-left: rem(1) solid var(--r-tag-border-color);
        cursor: pointer;
        padding-left: rem(3);
        font-size: rem(12);
        @include mixin.transition('opacity');

        &:hover {
            opacity: 0.7;
        }
    }

    .tags {
        padding: rem(10) 0 0;
    }
}