/* Custom Elements for Waterbear blocks*/

wb-step, wb-context, wb-expression{
    display: inline-block;
    background-color: #EDE378;
    border-radius: 5px;
    border-color: #CEBD3E;
    border-width: 2px;
    border-style: solid;
    margin: 5px 5px 2px 2px;
    float: left;
    clear: left;
    position: relative;
}

body:not(.block-dragging) wb-step,
body:not(.block-dragging) wb-context,
body:not(.block-dragging) wb-expression {
    cursor: move;
    /* More appropriate, but less compatible. */
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.no-drop{
    cursor: no-drop;
}

.drop-target{
    cursor: move;
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

wb-contains.drop-target{
    background-color: #ffffe0;
}
wb-contains.selected-block{
    background-color: #ccffcc; /* not sure if selected and drop-target should be the same highlight colour? Which is least surprising? */
}
wb-value.drop-target input:first-of-type{
    background-color: #fafad2;
}
wb-value.selected-value input:first-of-type{
    background-color: #ccffcc;
}

wb-expression{
    border-radius: 0;
    text-align: right;
    padding-left: 20px;
}



wb-value > wb-expression{
    float: none;
    clear: none;
}

wb-value select{
    min-width: 5em;
}

wb-step.dragging, wb-context.dragging, wb-expression.dragging{
    opacity: 0.5;
    position: absolute;
    /* Necessary for dragging events. */
    pointer-events: none;
}

/* This class is probably added on the body or the workspace container. */
.block-dragging {
    cursor: move;
    /* More appropriate, but less compatible. */
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

wb-value{
    display: block;
    text-align: right;
    margin-right: 10px;
    white-space:nowrap;
}

wb-row{
    display: flex;
    flex-direction: row;
    text-align: right;
    margin-left: 20px;
    white-space: nowrap;
}

wb-local{
    display: block;
    /*flex: 1;*/
    padding: 0;
    border: 2px solid white;
    border-radius: 3px;
    margin: 0;
    background-color: green;
}

wb-local > wb-expression {
    margin: 0;
}

wb-row > wb-value, wb-row > wb-local{
    display: block;
    margin-left: 0;
    margin-right: 4px;
}

wb-value > * {
    vertical-align: middle;
    margin: 0px 5px;
}


wb-value > input[type=color]{
    padding: 0 0 0 20px ;
}

wb-unit{
    display: inline-block;
}

wb-local[fortype]{
    display: none;
}

wb-local[fortype].show{
    display: block;
}

wb-context > wb-contains {
    display: block;
    background-color: rgba(255, 255, 255, 1.0);
    position: relative;
    padding-top: 7px;
    margin-left: 10px;
    margin-bottom: 0;
    padding-bottom: 1px;
    overflow-x: hidden;
    overflow-y: hidden;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-width: 2px 0 2px 2px;
    border-style: solid;
    border-color: inherit;
    border-right: 0;
    right: -3px;
}

wb-context > wb-contains:last-child:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

wb-context > header > wb-disclosure:after{
    content: "▼";
    width: 1em;
    height: 1em;
    position: absolute;
    top: 5px;
    left: 0px;
    cursor: default;
}

wb-context[closed] > header > wb-disclosure:after{
    content: "▶";
}

wb-context[closed] > wb-contains{
    display: none;
}

/*
 * Adds a glow to paused blocks. Makes 'em look ghosty.
 */
@keyframes paused-glow {
    from {
        box-shadow: 0 4px 10px rgba(63, 112, 223, 0.6);
    }
    to {
        box-shadow: 0 4px 24px rgba(63, 112, 223, 1);
    }
}

wb-step[fn],
wb-context[fn] {
    /* This gives a nifty slidy animation for when a block is paused. */
    transition: transform 750ms, background-color 750ms;
}

wb-step[fn].wb-paused,
wb-context[fn].wb-paused {
    transform: translate(.5em, 0px);
    background-color: white;
    animation: paused-glow 1250ms ease-in-out infinite alternate;
}

.hide{
    display: none;
}

wb-value > input{
padding-left:20px;
background:  #FFFFFF no-repeat 3px 3px;

}

wb-value[type=any] >input{background-image: url(../images/icon/control.svg);}
wb-value[type*=","][value] >input{padding-left: 60px;}
wb-value[type*=number] > input{background-image: url(../images/icon/math.svg);}
wb-value[type*=color] > input{background-image: url(../images/icon/color.svg);}
wb-value[type*=text] > input{background-image: url(../images/icon/text.svg);}
wb-value[type*=boolean] > input{background-image: url(../images/icon/boolean.svg);}
wb-value[type*=sprite] > input{background-image: url(../images/icon/sprite.svg);}
wb-value[type*=sound] > input{background-image: url(../images/icon/sound.svg);}
wb-value[type*=audio] > input{ background-image: url(../images/icon/audio.svg);}
wb-value[type*=array] > input{background-image: url(../images/icon/array.svg);}
wb-value[type*=image] > input{background-image: url(../images/icon/image.svg);}
wb-value[type*=shape] > input{background-image: url(../images/icon/shape.svg);}
wb-value[type*=vector] > input{background-image: url(../images/icon/vector.svg);}
wb-value[type*=object] > input{background-image: url(../images/icon/object.svg);}
wb-value[type*=path] > input{background-image: url(../images/icon/path.svg);}
wb-value[type*=rect] > input{background-image: url(../images/icon/rect.svg);}
wb-value[type*=string] > input{background-image: url(../images/icon/string.svg);}
wb-value[type*=geolocation] > input{ background-image: url(../images/icon/geolocation.svg);}
wb-value[type*=size] > input{ background-image: url(../images/icon/size.svg);}
wb-value[type*=date] > input{ background-image: url(../images/icon/calendar.svg); height:15px; }

wb-value[type*=array][type*=string] > input{
    background-image: url(../images/icon/array.svg), url(../images/icon/string.svg);
    background-position: 3px 3px, 20px 3px;
}
wb-value[type*=number][type*=vector] > input{
    background-image: url(../images/icon/math.svg), url(../images/icon/vector.svg);
    background-position: 3px 3px, 20px 3px;
}
wb-value[type*=text][type*=string] > input{
    background-image: url(../images/icon/text.svg), url(../images/icon/string.svg);
    background-position: 3px 3px, 20px 3px;
}
wb-value[type*=vector] > input{
    background-image: url(../images/icon/vector.svg);
    background-position: 3px 3px, 20px 3px;
}
wb-value[type*=image][type*=shape][type*=sprite] > input{
    background-image: url(../images/icon/image.svg), url(../images/icon/shape.svg), url(../images/icon/sprite.svg);
    background-position: 3px 3px, 20px 3px, 37px 3px;
}
wb-value[type*=number][type*=vector][type*=array] > input{
    background-image: url(../images/icon/math.svg), url(../images/icon/vector.svg), url(../images/icon/array.svg);
    background-position: 3px 3px, 20px 3px, 37px 3px;
}
wb-value[type*=number][type*=vector][type*=array][type*=date] > input{
    background-image: url(../images/icon/math.svg), url(../images/icon/vector.svg), url(../images/icon/array.svg), url(../images/icon/calendar.svg);;
    background-position: 3px 3px, 20px 3px, 37px 3px, 54px, 3px;
    padding-left: 80px;
}
wb-value[type*=image][type*=shape][type*=color] > input{
    background-image: url(../images/icon/image.svg), url(../images/icon/shape.svg), url(../images/icon/color.svg);
    background-position: 3px 3px, 20px 3px, 47px 3px;
    padding-left: 65px;
}
wb-value[type*=shape][type*=path] > input{
    background-image: url(../images/icon/shape.svg), url(../images/icon/path.svg);
    background-position: 3px 3px, 20px 3px;
}
wb-value[type*=number][type*=date] > input{
    background-image: url(../images/icon/math.svg), url(../images/icon/calendar.svg);
    background-position: 3px 3px, 20px 3px;
}
wb-workspace wb-value[selected=true] > input{border-color: blue}
wb-expression:before{
    content: '';
    width: 1em;
    height: 1em;
    display: block;
    position: absolute;
    top: .3em;
    left: .3em;
    background-size: contain;
    /* Over-ride background-image for each type of expression */
}
wb-expression[type=number]:before{ background-image: url(../images/icon/math.svg); }
wb-expression[type=color]:before{ background-image: url(../images/icon/color.svg); }
wb-expression[type=boolean]:before{ background-image: url(../images/icon/boolean.svg); }
wb-expression[type=sprite]:before{ background-image: url(../images/icon/sprite.svg); }
wb-expression[type=any]:before{ background-image: url(../images/icon/control.svg); }
wb-expression[type=sound]:before{ background-image: url(../images/icon/sound.svg); }
wb-expression[type=audio]:before{ background-image: url(../images/icon/audio.svg); }
wb-expression[type=array]:before{ background-image: url(../images/icon/array.svg); }
wb-expression[type=wb-image]:before{ background-image: url(../images/icon/image.svg); }
wb-expression[type=shape]:before{ background-image: url(../images/icon/shape.svg); }
wb-expression[type=vector]:before{ background-image: url(../images/icon/vector.svg); }
wb-expression[type=object]:before{ background-image: url(../images/icon/object.svg); }
wb-expression[type=path]:before{ background-image: url(../images/icon/path.svg); }
wb-expression[type=rect]:before{ background-image: url(../images/icon/rect.svg); }
wb-expression[type=string]:before{ background-image: url(../images/icon/string.svg); }
wb-expression[type=geolocation]:before{ background-image: url(../images/icon/geolocation.svg); }
wb-expression[type=size]:before{ background-image: url(../images/icon/size.svg);}
wb-expression[type=date]:before{ background-image: url(../images/icon/calendar.svg); background-repeat: no-repeat; top: 2px; }

/* Used for input resizing */
.sekrit-svg{
    position: absolute;
    left: -1000px; /* cannot get size if display: none */
    top: 0; /* because it was screwing up layout even hidden */
    width: 400px;
    height: 100px;
}

.wb-icons{
    display: none;
}