toast-elem[data-type=success]{background-color:#3dc763c0}toast-elem[data-type=info]{background-color:#63a4f9c0}toast-elem[data-type=warn]{background-color:#d3cd16c0}toast-elem[data-type=error]{background-color:#ed3d3dc0}toast-elem{padding:4px 6px 4px 4px;border-radius:6px;display:flex;gap:4px;align-items:center;transition:translate .12s}body>.notice-toast{--margin: 1vw;position:fixed;display:flex;gap:8px;z-index:255;&[data-hor=left]{left:var(--margin);align-items:start;>toast-elem:not(.show){translate:calc(-100% - var(--margin))}}&[data-hor=center]{left:50vw;translate:-50%;align-items:center}&[data-hor=right]{right:var(--margin);align-items:end;>toast-elem:not(.show){translate:calc(100% + var(--margin))}}&[data-ver=top]{top:var(--margin);flex-direction:column-reverse}&[data-ver=bottom]{bottom:var(--margin);flex-direction:column}&[data-hor=left][data-ver=top]>toast-elem{transform-origin:left top}&[data-hor=center][data-ver=top]>toast-elem{transform-origin:center top;&:not(.show){translate:0px calc(-100% - var(--margin))}}&[data-hor=right][data-ver=top]>toast-elem{transform-origin:right top}&[data-hor=left][data-ver=bottom]>toast-elem{transform-origin:left bottom}&[data-hor=center][data-ver=bottom]>toast-elem{transform-origin:center bottom;&:not(.show){translate:0px calc(100% + var(--margin))}}&[data-hor=right][data-ver=bottom]>toast-elem{transform-origin:right bottom}}