@charset "utf-8";
@import (optional, reference) "var.less";
/*Message*/
._message {
    --_msg-w: 600px;
    width: ~"min(var(--_msg-w),100%)";
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 910;
    transform: translate(-50%, 0);
    section {
        --_msg-fs: var(--_sz-font);
        --_msg-txt: var(--_c-text);
        --_msg-bg: var(--_c-stage);
        --_msg-bd: var(--_c-text-bd);
        --_prog-bg: var(--_c-text-bd);
        font-size: var(--_msg-fs);
        color: var(--_msg-txt);
        line-height:  var(--_sz-em-brief);
        background-image:linear-gradient(var(--_msg-bg),var(--_msg-bg)),linear-gradient(var(--_c-stage),var(--_c-stage));
        border: 1px solid var(--_msg-bd);
        .radius;
        padding:  var(--_sz-em-space) var(--_sz-em-font);
        .shadow-lt;
        margin: var(--_m) var(--_m) 0 var(--_m);
        position: relative;
        display: none;
        [role="wrapper"] {
            display: flex;
        }
        [role="body"] {
            flex: auto;
        }
        [role="heading"] {
            font-weight: bold;
            margin-bottom: var(--_sz-em-min);
        }
        AX-RESULT {
            --_result-w: var(--_msg-fs);
            margin-right: var(--_sz-min);
             margin-top: 0.143em;
        }
        [role="close"] {
            font-size: var(--_fs-min);
            color: var(--_c-text);
            width: 1.5em;
            aspect-ratio: 1/1;
            line-height: 1.5em;
            text-align: center;
            opacity: var(--_o-disabled);
            margin-right: calc(-1*var(--_sz-space));
            .v3-trans-all(var(--_dur-2), linear);
            &:hover {
                cursor: pointer;
                opacity: 1;
            }
        }
        [role="progress"] {
            height: 2px;
            width: 100%;
            background-color: var(--_prog-bg);
            transition-timing-function: linear;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        &:where([progress="stop"]) [role="progress"] {
            transition-property: none;
            width: 100%;
            opacity: 0;
        }
        &:where([progress="play"]) [role="progress"] {
            transition-property: width;
            width: 0;
            opacity: 1;
        }
        &:where([status="succ"]) {
            --_msg-txt: var(--_c-succ-dp);
            --_msg-bg: var(--_c-succ-bg);
            --_msg-bd: var(--_c-succ-bd);
            --_prog-bg: var(--_c-succ);
        }
        &:where([status="error"]) {
            --_msg-txt: var(--_c-error-dp);
            --_msg-bg: var(--_c-error-bg);
            --_msg-bd: var(--_c-error-bd);
            --_prog-bg: var(--_c-error);
        }
        &:where([status="issue"]) {
            --_msg-txt: var(--_c-issue-dp);
            --_msg-bg: var(--_c-issue-bg);
            --_msg-bd: var(--_c-issue-bd);
            --_prog-bg: var(--_c-issue);
        }
        &:where([status="info"]) {
            --_msg-txt: var(--_c-info-dp);
            --_msg-bg: var(--_c-info-bg);
            --_msg-bd: var(--_c-info-bd);
            --_prog-bg: var(--_c-info);
        }
        &:where([status="warn"]) {
            --_msg-txt: var(--_c-warn-dp);
            --_msg-bg: var(--_c-warn-bg);
            --_msg-bd: var(--_c-warn-bd);
            --_prog-bg: var(--_c-warn);
        }
        &:where([notable]) {
            padding:var(--_sz-font);
            AX-RESULT {
                --_result-w: var(--_sz-em-body);
                margin-right: var(--_sz-font);
                margin-top:0;
            }
            [role="heading"] {
                font-size: var(--_sz-em-brief);
                font-weight: normal;
                line-height:  1.56em;
                margin-bottom: 0.444em;
            }
            [role="close"] {
                margin-top: -0.6rem;
            }
        }
    }
    &:where([placement="left-top"]) {
        --_msg-w: 400px;
        left: 0;
        transform: none;
    }
    &:where([placement="right-top"]) {
        --_msg-w: 400px;
        left: auto;
        right: 0;
        transform: none;
    }
    &:where([placement="left-center"]) {
        --_msg-w: 400px;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
    }
    &:where([placement="center"]) {
        top: 50%;
        transform: translate(-50%, -50%);
    }
    &:where([placement="right-center"]) {
        --_msg-w: 400px;
        left: auto;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
    }
    &:where([placement="left-bottom"]) {
        --_msg-w: 400px;
        left: 0;
        top: auto;
        bottom: 0;
        transform: none;
    }
    &:where([placement="center-bottom"]) {
        top: auto;
        bottom: 0;
    }
    &:where([placement="right-bottom"]) {
        --_msg-w: 400px;
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
        transform: none;
    }
    &:where([placement*="-center"], [placement="center"]) section {
        margin-top: calc(var(--_m)/2);
        margin-bottom: calc(var(--_m)/2);
    }
    &:where([placement*="-bottom"]) section {
        margin-top: 0;
        margin-bottom: var(--_m);
    }
}
