@charset "utf-8";
@import (optional, reference) "var.less";
/*Buoy*/
AX-BUOY {
    --_buoy-p: .6rem;
    --_buoy-h: var(--_sz-list);
    --_buoy-lh: var(--_sz-list);
    --_buoy-c-txt: var(--_c-text);
    --_buoy-c-bd: var(--_c-text-bd);
    .v3-flex-center(inline-flex);
    vertical-align: middle;
    [rep=wrap] {
        font-size: var(--_sz-ignore);
        color: var(--_buoy-c-txt);
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid var(--_buoy-c-bd);
        border-radius: var(--_r);
        height: var(--_buoy-h);
        line-height: calc(var(--_buoy-lh) - 2px);
        background-color: var(--_c-stage);
        text-align: center;
        .v3-trans-all(var(--_dur-1));
    }
    [rep=head] {
        background-color: var(--_c-ignore-bg);
        padding: 0 var(--_buoy-p);
        border-right: 1px solid var(--_buoy-c-bd);
        position: relative;
        .v3-flex-center(inline-flex);
        .v3-trans-all(var(--_dur-1));
        &:empty {
            display: none;
        }
        [rep=icon],
        [rep=arrow] {
            .v3-trans-all();
        }
        [rep=icon]{
            font-size: var(--_sz-ignore);
        }
        [rep=arrow] {
            font-size: var(--_sz-root);
            opacity: var(--_o-mask);
        }
        &:where(:has([rep=icon])) [rep=label] {
            margin-left: var(--_sz-min);
        }
        &:where(:has([rep=arrow])) [rep=label] {
            margin-right: var(--_sz-min);
        }
    }
    &[reverse] [rep=head] {
        background-color: var(--_c-stage);
    }
    [rep=value] {
        padding: 0 var(--_buoy-p);
        .v3-trans-all(var(--_dur-1));
    }
    &[reverse] [rep=value] {
        background-color: var(--_c-ignore-bg);
    }
    &._opened [rep=arrow] {
        rotate: 180deg;
    }
    &:where(:not([reverse])) [rep=head]:hover {
        color: var(--_c-ignore);
    }
    &[theme=prim] {
        --_buoy-c-txt: var(--_c-prim);
        --_buoy-c-bd: var(--_c-prim);
    }
    &[theme=succ] {
        --_buoy-c-txt: var(--_c-succ);
        --_buoy-c-bd: var(--_c-succ);
    }
    &[theme=error] {
        --_buoy-c-txt: var(--_c-error);
        --_buoy-c-bd: var(--_c-error);
    }
    &[theme=warn] {
        --_buoy-c-txt: var(--_c-warn);
        --_buoy-c-bd: var(--_c-warn);
    }
    &[theme=info] {
        --_buoy-c-txt: var(--_c-info);
        --_buoy-c-bd: var(--_c-info);
    }
    &[theme=issue] {
        --_buoy-c-txt: var(--_c-issue);
        --_buoy-c-bd: var(--_c-issue);
    }
    &[theme=text] {
        --_buoy-c-bd: var(--_c-text);
    }
    &[theme=brief] {
        --_buoy-c-txt: var(--_c-brief);
        --_buoy-c-bd: var(--_c-brief);
    }
    &[theme=prim]:where(:not([reverse])) [rep=head],
    &[theme=prim]:where([reverse]) [rep=value] {
        background-color: var(--_c-prim);
    }
    &[theme=succ]:where(:not([reverse])) [rep=head],
    &[theme=succ]:where([reverse]) [rep=value] {
        background-color: var(--_c-succ);
    }
    &[theme=error]:where(:not([reverse])) [rep=head],
    &[theme=error]:where([reverse]) [rep=value] {
        background-color: var(--_c-error);
    }
    &[theme=warn]:where(:not([reverse])) [rep=head],
    &[theme=warn]:where([reverse]) [rep=value] {
        background-color: var(--_c-warn);
    }
    &[theme=info]:where(:not([reverse])) [rep=head],
    &[theme=info]:where([reverse]) [rep=value] {
        background-color: var(--_c-info);
    }
    &[theme=issue]:where(:not([reverse])) [rep=head],
    &[theme=issue]:where([reverse]) [rep=value] {
        background-color: var(--_c-issue);
    }
    &[theme=text]:where(:not([reverse])) [rep=head],
    &[theme=text]:where([reverse]) [rep=value] {
        background-color: var(--_c-text);
    }
    &[theme=brief]:where(:not([reverse])) [rep=head],
    &[theme=brief]:where([reverse]) [rep=value] {
        background-color: var(--_c-brief);
    }
    &[theme] [rep=head] {
        border-width: 0;
    }
    &[theme]:where(:not([reverse])) [rep=head] {
        color: #fff;
    }
    &[theme]:where(:not([reverse])) [rep=head]:hover {
        color: rgba(255, 255, 255, var(--_o-active));
    }
    &[size=sm] {
        --_buoy-h: var(--_sz-brief);
        --_buoy-lh: var(--_sz-brief);
        --_buoy-p: var(--_sz-min);
    }
    &[size=lg] {
        --_buoy-h: var(--_sz-body);
        --_buoy-lh: var(--_sz-body);
        --_buoy-p: var(--_sz-space);
    }
    &[theme=prim]:where([reverse]) [rep=head] {
        color: var(--_c-prim);
    }
    &[theme=succ]:where([reverse]) [rep=head] {
        color: var(--_c-succ);
    }
    &[theme=error]:where([reverse]) [rep=head] {
        color: var(--_c-error);
    }
    &[theme=warn]:where([reverse]) [rep=head] {
        color: var(--_c-warn);
    }
    &[theme=info]:where([reverse]) [rep=head] {
        color: var(--_c-info);
    }
    &[theme=issue]:where([reverse]) [rep=head] {
        color: var(--_c-issue);
    }
    &[theme=text]:where([reverse]) [rep=head] {
        color: var(--_c-text);
    }
    &[theme=brief]:where([reverse]) [rep=head] {
        color: var(--_c-brief);
    }
    &[theme]:where([reverse]) [rep=value] {
        color: #fff;
    }
    &[reverse] [rep=value]:hover {
        color: var(--_c-text);
    }
    &[theme]:where([reverse]) [rep=value]:hover {
        color: rgba(255, 255, 255, var(--_o-active));
    }
}
