@charset "utf-8";
@import (optional, reference) "var.less";
/*Tag & Tags*/
._tags {
    --_tags-m: var(--_sz-space);
    margin-right: calc(-1*var(--_tags-m));
    margin-bottom: calc(-1*var(--_tags-m));
    display: flex;
    flex-wrap: wrap;
    &:empty {
        --_tags-m: 0;
    }
    input[type="text"] {
        width: 1em;
        min-width: 6em;
        border-radius: 0;
        border-top-width: 0;
        border-left-width: 0;
        border-right-width: 0;
        padding: 0;
        margin-bottom: var(--_tags-m);
        height: var(--_sz-body);
        line-height: var(--_sz-body);
        transition-property: color, border-color;
    }
    input[type="text"]:focus {
        outline-width: 0;
    }
    [rep=empty] {
        margin-bottom: var(--_tags-m);
    }
    a{
        color:inherit;
    }
    ._tag {
        margin-right: var(--_tags-m);
        margin-bottom: var(--_tags-m);
    }
}
._tag {
    --_tag-p:var(--_sz-space);
    --_tag-h:var(--_sz-body);
    --_tag-c-txt:var(--_sz-text);
    --_tag-c-bd:var(--_c-text-bd);
    --_tag-c-bg:transparent;
    --_tag-r:var(--_r);
    --_tag-bd-w:1px;
    font-size: var(--_sz-ignore);
    color:var(--_tag-c-txt);
    height: var(--_tag-h);
    box-sizing: border-box;
    padding: 0 var(--_tag-p);
    border: var(--_tag-bd-w) solid var(--_tag-c-bd);
    background-color: var(--_tag-c-bg);
    border-radius: var(--_tag-r);
    .v3-flex-center(inline-flex);
    position: relative;
    [rep=remove] {
        font-family: var(--_ff-icon);
        margin-right: calc(-1*var(--_tag-p) + 0.286em);
        margin-left: var(--_tag-p);
        &:hover:before {
            color: var(--_c-error);
            opacity: 1;
            cursor: pointer;
        }
    }
    [rep=remove]:before {
        content: 'close';
        display: inline-block;
        opacity: var(--_o-disabled);
        scale: 0.8;
        .v3-trans-all(var(--_dur-2), linear);
    }
    &:hover,
    &:focus{
        color:var(--_tag-c-txt);
        border-color:var(--_tag-c-bd);
        background-color: var(--_tag-c-bg);
    }
    &[selected]{
        border-color:var(--_tag-c);
    }
    &[disabled]{
        opacity: var(--_o-disabled);
    }
}
._tags[theme=prim] ._tag,
._tag[theme=prim]{
    --_tag-c-txt:var(--_c-prim-dp);
    --_tag-c-bd:var(--_c-prim-bd);
    --_tag-c-bg:var(--_c-prim-bg);
}
._tags[theme=succ] ._tag,
._tag[theme=succ] {
    --_tag-c-txt:var(--_c-succ-dp);
    --_tag-c-bd:var(--_c-succ-bd);
    --_tag-c-bg:var(--_c-succ-bg);
}
._tags[theme=error] ._tag,
._tag[theme=error] {
    --_tag-c-txt:var(--_c-error-dp);
    --_tag-c-bd:var(--_c-error-bd);
    --_tag-c-bg:var(--_c-error-bg);
}
._tags[theme=warn] ._tag,
._tag[theme=warn] {
    --_tag-c-txt:var(--_c-warn-dp);
    --_tag-c-bd:var(--_c-warn-bd);
    --_tag-c-bg:var(--_c-warn-bg);
}
._tags[theme=issue] ._tag,
._tag[theme=issue]{
    --_tag-c-txt:var(--_c-issue-dp);
    --_tag-c-bd:var(--_c-issue-bd);
    --_tag-c-bg:var(--_c-issue-bg);
}
._tags[theme=info] ._tag,
._tag[theme=info] {
    --_tag-c-txt:var(--_c-info-dp);
    --_tag-c-bd:var(--_c-info-bd);
    --_tag-c-bg:var(--_c-info-bg);
}
._tags[theme=text] ._tag,
._tag[theme=text] {
    --_tag-c-bg:var(--_c-text-bg);
}
._tags[theme=brief] ._tag,
._tag[theme=brief] {
    --_tag-c-txt:var(--_c-brief);
    --_tag-c-bd:var(--_c-brief-bd);
    --_tag-c-bg:var(--_c-brief-bg);
}
._tags[theme=ignore] ._tag,
._tag[theme=ignore]{
    --_tag-c-txt:var(--_c-ignore);
    --_tag-c-bd:var(--_c-ignore-bd);
    --_tag-c-bg:var(--_c-ignore-bg);
}
._tags[type=borderless] ._tag,
._tag[type=borderless] {
    --_tag-bd-w:0;
}
._tags[shape=square] ._tag,
._tag[shape=square] {
    --_tag-r:0;
}
._tags[shape=round] ._tag,
._tag[shape=round] {
    --_tag-r: var(--_tag-h);
}
._tags[compact] {
    --_tags-m:var(--_sz-min);
}
._tags[compact] ._tag {
    margin-right: var(--_tags-m);
    margin-bottom: var(--_tags-m);
}
._tags[compact] ._tag,
._tag[compact] {
    --_tag-p:var(--_sz-min);
}
._tags[compact] input[type="text"],
._tags[compact] [rep=empty] {
    margin-bottom: var(--_tags-m);
}
._tags[type=plain] {
    --_tags-m:0;
}
._tags[type=plain] ._tag,
._tag[type=plain]{
    --_tag-p:0;
    --_tag-bd-w:0;
    font-size: inherit;
}
._tags[type=plain] ._tag {
    margin-right: var(--_sz-space);
}
