/* ==========================================================
PremiumZone
File : assets/background/frameOrnament.tuning.css
Description : Final visual tuning for frame ornaments
========================================================== */

.pz-frame-ornament-top .pz-frame-ornament-line{
    width:calc(100% + (20px * var(--frame-scale))) !important;
    left:calc(-10px * var(--frame-scale)) !important;
}

.pz-frame-ornament-top-segment.is-line::before,
.pz-frame-ornament-top-segment.is-step::before{height:calc(4px * var(--frame-scale)) !important;}
.pz-frame-ornament-top-segment.is-line::after,
.pz-frame-ornament-top-segment.is-step::after{height:calc(3px * var(--frame-scale)) !important;}
.pz-frame-ornament-top-segment.is-double::before,
.pz-frame-ornament-top-segment.is-double::after{height:calc(3px * var(--frame-scale)) !important;}
.pz-frame-ornament-top-segment.is-block::before{height:calc(10px * var(--frame-scale)) !important;}
.pz-frame-ornament-top-segment.is-dots::before{width:calc(6px * var(--frame-scale)) !important;height:calc(6px * var(--frame-scale)) !important;}
.pz-frame-ornament-top-segment.is-ticks::before{height:calc(10px * var(--frame-scale)) !important;}
.pz-frame-ornament-top-segment.is-block-dots::before{width:calc(12px * var(--frame-scale)) !important;height:calc(12px * var(--frame-scale)) !important;}

.pz-frame-ornament-motif,
.pz-frame-ornament-motif.is-top,
.pz-frame-ornament-motif.is-bottom{
    width:calc(64px * var(--frame-scale)) !important;
    height:calc(44px * var(--frame-scale)) !important;
    flex:0 0 calc(64px * var(--frame-scale)) !important;
    box-sizing:border-box !important;
    font-size:calc(40px * var(--frame-scale)) !important;
    line-height:1 !important;
    font-weight:700 !important;
    color:var(--ornament-cyan) !important;
    -webkit-text-fill-color:var(--ornament-cyan) !important;
    font-variant-emoji:text !important;
    text-shadow:0 0 calc(7px * var(--frame-scale)) rgba(0,246,255,.55) !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
}

.pz-frame-ornament-motif.is-top{margin-left:calc(9px * var(--frame-scale)) !important;margin-right:calc(9px * var(--frame-scale)) !important;}
.pz-frame-ornament-motif.is-bottom{margin-left:calc(6px * var(--frame-scale)) !important;margin-right:calc(6px * var(--frame-scale)) !important;}

.pz-frame-ornament-motif{
    background:
        linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) left top / calc(14px * var(--frame-scale)) calc(1px * var(--frame-scale)) no-repeat,
        linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) left top / calc(1px * var(--frame-scale)) calc(14px * var(--frame-scale)) no-repeat,
        linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) right top / calc(14px * var(--frame-scale)) calc(1px * var(--frame-scale)) no-repeat,
        linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) right top / calc(1px * var(--frame-scale)) calc(14px * var(--frame-scale)) no-repeat,
        linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) left bottom / calc(14px * var(--frame-scale)) calc(1px * var(--frame-scale)) no-repeat,
        linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) left bottom / calc(1px * var(--frame-scale)) calc(14px * var(--frame-scale)) no-repeat,
        linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) right bottom / calc(14px * var(--frame-scale)) calc(1px * var(--frame-scale)) no-repeat,
        linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) right bottom / calc(1px * var(--frame-scale)) calc(14px * var(--frame-scale)) no-repeat !important;
}

.pz-frame-ornament-top-rail::before{width:calc(32px * var(--frame-scale)) !important;height:calc(9px * var(--frame-scale)) !important;}
.pz-frame-ornament-top-rail::after{width:calc(14px * var(--frame-scale)) !important;height:calc(46px * var(--frame-scale)) !important;top:calc(50% + 17px * var(--frame-scale));background-size:calc(11px * var(--frame-scale)) calc(11px * var(--frame-scale)),calc(9px * var(--frame-scale)) calc(9px * var(--frame-scale)),calc(8px * var(--frame-scale)) calc(8px * var(--frame-scale)),calc(7px * var(--frame-scale)) calc(7px * var(--frame-scale)) !important;}

.pz-dashboard-ornament-action .pz-frame-ornament-action{
    transition:
        color .08s steps(1,end),
        border-color .08s steps(1,end),
        text-shadow .08s steps(1,end),
        box-shadow .08s steps(1,end);
}

.pz-dashboard-ornament-action .pz-frame-ornament-action.is-activated{
    animation:pz-dashboard-action-blink .18s steps(1,end) 4;
}

@keyframes pz-dashboard-action-blink{
    0%,49%{
        color:transparent;
        text-shadow:none;
        border-color:rgba(255,255,255,.18);
        box-shadow:none;
    }
    50%,100%{
        color:var(--ornament-cyan);
        text-shadow:0 0 calc(8px * var(--frame-scale)) var(--ornament-cyan);
        border-color:rgba(255,255,255,.45);
        box-shadow:0 0 calc(10px * var(--frame-scale)) rgba(0,246,255,.35);
    }
}