/*!
 * jQuery ClassyColor
 * vox.SPACE
 *
 * Written by Marius Stanciu - Sergiu <marius@vox.space>
 * Licensed under the MIT license https://vox.SPACE/LICENSE-MIT
 * Version 1.1.0
 *
 */
 
.ClassyColor {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    display:inline-block;
    font-size:15px;
    width:2.8em;
    height:2.8em;
    -webkit-perspective:25em;
    perspective:25em;
    position:relative;
    transition:transform .5s;
    font-family:monospace;
}

.ClassyColor .maximize-wrapper{
    position:absolute;
    border-radius:.3em;
    background:#fff;
    padding:.4em;
    box-shadow:0 .1em .2em rgba(0,0,0,.2);
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-animation:collapse-animation .5s;
    animation:collapse-animation .5s;
    cursor:pointer;
}

.ClassyColor .display,
.ClassyColor .slider{
    box-shadow:0 .1em .15em 0 rgba(0,0,0,.2)inset
}

.ClassyColor.expanded .maximize-wrapper{
    -webkit-animation:expand-animation .5s;
    animation:expand-animation .5s;
    cursor:default;
}

@-webkit-keyframes expand-animation{
    0%,100%{-webkit-transform:translateZ(0)rotateX(0)rotateY(0)}40%{-webkit-transform:translateZ(.6em)rotateX(-10deg)rotateY(5deg)}
}

@keyframes expand-animation{
    0%,100%{transform:translateZ(0)rotateX(0)rotateY(0)}40%{transform:translateZ(.6em)rotateX(-10deg)rotateY(5deg)}
}

@-webkit-keyframes collapse-animation{
    0%,100%{-webkit-transform:translateZ(0)rotateX(0)rotateY(0)}40%{-webkit-transform:translateZ(-2em)rotateX(10deg)rotateY(-5deg)}
}

@keyframes collapse-animation{0%,100%{transform:translateZ(0)rotateX(0)rotateY(0)}40%{transform:translateZ(-2em)rotateX(10deg)rotateY(-5deg)}
}

.ClassyColor .inner-maximize-wrapper{
    position:relative;
    width:2em;
    height:2em;
    overflow:hidden;
    transition:height .5s,width .5s;
}

.ClassyColor .ui-wrapper{
    white-space:nowrap;
    display:inline-block;
}

.ClassyColor .ui-wrapper>*{
    display:inline-block;
    vertical-align:top;
}

.ClassyColor .display-wrapper{
    margin-right:.4em;
    background-size:41%;
    -webkit-transform-origin:top left;
    transform-origin:top left;
    transition:transform .5s;
}

.ClassyColor.componentcount-3 .display-wrapper{
    -webkit-transform:scale(.6);
    transform:scale(.6);
    width:3.4em;
    height:3.4em;
}

.ClassyColor.componentcount-4 .display-wrapper{
    -webkit-transform:scale(.45);
    transform:scale(.45);
    width:4.6em;
    height:4.6em;
}

.ClassyColor.expanded .display-wrapper{
    -webkit-transform:scale(1);
    transform:scale(1);
}

.ClassyColor .display-wrapper,
.ClassyColor .slider.a:before{
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjIiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHg9IjAiIHk9IjAiIHN0eWxlPSJmaWxsOiNjYWNhY2EiIC8+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMSIgeT0iMSIgc3R5bGU9ImZpbGw6I2NhY2FjYSIgLz48L3N2Zz4=);
}

.ClassyColor .display{
    width:100%;
    height:100%;
}

.ClassyColor .slider-container{
    opacity:0;
    transition:transform .5s,opacity .5s;
}

.ClassyColor.componentcount-3 .slider-container{
    -webkit-transform:translateX(-1.4em);
    transform:translateX(-1.4em);
}

.ClassyColor.componentcount-4 .slider-container{
    -webkit-transform:translateX(-2.6em);
    transform:translateX(-2.6em);
}

.ClassyColor.expanded .slider-container{
    opacity:1;
    -webkit-transform:translateX(0);
    transform:translateX(0);
}

.ClassyColor .slider{
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 12em;
    height: 1em;
    background: rgba(128,128,128,.12);
    overflow: hidden;
    margin-bottom: 0.2em;
    cursor: col-resize;
}

.ClassyColor .slider.a:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: left center;
    background-size: auto 27%;
    z-index: -1;
}

.ClassyColor.show-labels .slider .handle:after{
    content: attr(data-component);
    text-transform: uppercase;
    position: absolute;
    left: 100%;
    color: #fff;
    font-size: 0.8em;
    top: 0.2em;
    margin-left: 0.2em;
    text-shadow: 1px 0 0 rgba(0,0,0,0.25),-1px 0 0 rgba(0,0,0,0.25),0 1px 0 rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.25);
    -moz-text-shadow: 1px 0 0 rgba(0,0,0,0.25),-1px 0 0 rgba(0,0,0,0.25),0 1px 0 rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.25);
    -webkit-text-shadow: 1px 0 0 rgba(0,0,0,0.25),-1px 0 0 rgba(0,0,0,0.25),0 1px 0 rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.25);
}

.ClassyColor .slider:last-child{
    margin-bottom: 0;
}

.ClassyColor .slider .handle{
    display: inline-block;
    position: relative;
    content: '';
    margin-top: -0.1em;
    margin-left: -0.2em;
    width: 0.4em;
    height: 100%;
    padding-bottom: 0.2em;
    background: rgba(255,255,255,.6);
    box-shadow: 0 .1em .2em 0 rgba(0,0,0,0.3),0 0 0.3em 0.1em #fff inset,0 0 0 0.1em #fff inset;
    -moz-box-shadow: 0 .1em .2em 0 rgba(0,0,0,0.3),0 0 0.3em 0.1em #fff inset,0 0 0 0.1em #fff inset;
    -webkit-box-shadow: 0 .1em .2em 0 rgba(0,0,0,0.3),0 0 0.3em 0.1em #fff inset,0 0 0 0.1em #fff inset;
    pointer-events: none;
    z-index: 1;
}

.ClassyColor .display,
.ClassyColor .display-wrapper,
.ClassyColor .inner-maximize-wrapper,
.ClassyColor .slider{
    border-radius: 0.2em;
}

.ClassyColor .output-wrapper{
    font-size: 0.8em;
    height: 1.2em;
    margin-top: 0.4em;
    color: #333;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}