.pd__loading{&[data-v-c3ad05b1]{z-index:var(--piano-z-index-loading);--icon-visual-half-height:56.57px;transition:all linear}& .icon{&[data-v-c3ad05b1]{clip-path:inset(0);width:20px;height:140px;transition:all .6s cubic-bezier(.4,.4,0,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}& .back[data-v-c3ad05b1]{background:var(--rebranding-loading-bg);width:20px;height:140px;position:absolute;top:0;left:0}& .front[data-v-c3ad05b1]{background:var(--rebranding-loading-bar);clip:rect(10px, 20px, 140px, 0px);background-position:bottom;width:20px;height:140px;transition:all .3s cubic-bezier(.4,.4,0,1);position:absolute;bottom:0;left:0}}& .slot[data-v-c3ad05b1]{left:50%;top:calc(50% + var(--icon-visual-half-height) + 40px);white-space:nowrap;text-align:center;position:absolute;transform:translate(-50%)}&.loading-enter-from{&[data-v-c3ad05b1]{background-color:#fff0}& .icon{& .front[data-v-c3ad05b1]{clip:rect(140px, 20px, 140px, 0px)}}}&.loading-enter-to{&[data-v-c3ad05b1]{background-color:var(--base-color-1)}& .icon{& .front[data-v-c3ad05b1]{clip:rect(10px, 20px, 140px, 0px)}}}&.loading-enter-active{&[data-v-c3ad05b1]{transition:background-color .8s cubic-bezier(.4,.4,0,1) .1s}& .icon{& .front[data-v-c3ad05b1]{transition:all 2s cubic-bezier(.31,.13,0,1)}}}&.loading-leave-active{&[data-v-c3ad05b1]{transition:all .6s cubic-bezier(.4,.4,0,1) .3s}& .icon{&[data-v-c3ad05b1]{transition:all .3s cubic-bezier(.4,.4,0,1) .3s}& .front[data-v-c3ad05b1]{transition:all .3s cubic-bezier(.4,.4,0,1)}}& .slot[data-v-c3ad05b1]{transition:all .3s cubic-bezier(.4,.4,0,1)}}&.loading-leave-to{&[data-v-c3ad05b1]{background-color:#fff0}& .icon{&[data-v-c3ad05b1]{clip-path:inset(0 0 100%)}& .front[data-v-c3ad05b1]{clip:rect(0px, 20px, 140px, 0px)}}& .slot[data-v-c3ad05b1]{opacity:0}}}