@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;
    [role=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));
    }
    [role=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;
        }
        [role=icon],
        [role=arrow] {
            .v3-trans-all();
        }
        [role=icon]{
            font-size: var(--_sz-ignore);
        }
        [role=arrow] {
            font-size: var(--_sz-root);
            opacity: var(--_o-mask);
        }
        &:where(:has([role=icon])) [role=label] {
            margin-left: var(--_sz-min);
        }
        &:where(:has([role=arrow])) [role=label] {
            margin-right: var(--_sz-min);
        }
    }
    &[reverse] [role=head] {
        background-color: var(--_c-stage);
    }
    [role=value] {
        padding: 0 var(--_buoy-p);
        .v3-trans-all(var(--_dur-1));
    }
    &[reverse] [role=value] {
        background-color: var(--_c-ignore-bg);
    }
    &._opened [role=arrow] {
        rotate: 180deg;
    }
    &:where(:not([reverse])) [role=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])) [role=head],
    &[theme=prim]:where([reverse]) [role=value] {
        background-color: var(--_c-prim);
    }
    &[theme=succ]:where(:not([reverse])) [role=head],
    &[theme=succ]:where([reverse]) [role=value] {
        background-color: var(--_c-succ);
    }
    &[theme=error]:where(:not([reverse])) [role=head],
    &[theme=error]:where([reverse]) [role=value] {
        background-color: var(--_c-error);
    }
    &[theme=warn]:where(:not([reverse])) [role=head],
    &[theme=warn]:where([reverse]) [role=value] {
        background-color: var(--_c-warn);
    }
    &[theme=info]:where(:not([reverse])) [role=head],
    &[theme=info]:where([reverse]) [role=value] {
        background-color: var(--_c-info);
    }
    &[theme=issue]:where(:not([reverse])) [role=head],
    &[theme=issue]:where([reverse]) [role=value] {
        background-color: var(--_c-issue);
    }
    &[theme=text]:where(:not([reverse])) [role=head],
    &[theme=text]:where([reverse]) [role=value] {
        background-color: var(--_c-text);
    }
    &[theme=brief]:where(:not([reverse])) [role=head],
    &[theme=brief]:where([reverse]) [role=value] {
        background-color: var(--_c-brief);
    }
    &[theme] [role=head] {
        border-width: 0;
    }
    &[theme]:where(:not([reverse])) [role=head] {
        color: #fff;
    }
    &[theme]:where(:not([reverse])) [role=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]) [role=head] {
        color: var(--_c-prim);
    }
    &[theme=succ]:where([reverse]) [role=head] {
        color: var(--_c-succ);
    }
    &[theme=error]:where([reverse]) [role=head] {
        color: var(--_c-error);
    }
    &[theme=warn]:where([reverse]) [role=head] {
        color: var(--_c-warn);
    }
    &[theme=info]:where([reverse]) [role=head] {
        color: var(--_c-info);
    }
    &[theme=issue]:where([reverse]) [role=head] {
        color: var(--_c-issue);
    }
    &[theme=text]:where([reverse]) [role=head] {
        color: var(--_c-text);
    }
    &[theme=brief]:where([reverse]) [role=head] {
        color: var(--_c-brief);
    }
    &[theme]:where([reverse]) [role=value] {
        color: #fff;
    }
    &[reverse] [role=value]:hover {
        color: var(--_c-text);
    }
    &[theme]:where([reverse]) [role=value]:hover {
        color: rgba(255, 255, 255, var(--_o-active));
    }
}
