/* 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;
    padding-left: 10px;
    float: left;
    clear: left;
    position: relative;
    z-index: 0;
}

wb-workspace wb-context, wb-workspace wb-step{
    margin-top: -2px;
}

wb-workspace{
    overflow: auto;
}

wb-workspace wb-contains{
    padding-top: 20px;
    padding-left: 5px;
    padding-right: 0;
}


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;
}

/* add a tab to steps */

wb-step > svg.tab, wb-context > svg.tab{
    position: absolute;
    left: 25px;
    top: -12px;
    /* height: 12px; */
 }

 svg.slot{
     display: none;
 }

 wb-step > svg.slot, wb-context > svg.slot{
     position: absolute;
     display: block;
     left: 25px;
     bottom: -2px;
     fill: white;
 }
 
 wb-contains::before{
    content: url("../images/tab.svg");
    position: absolute;
    display: block;
    left: 34px;
    top: -12px;
    fill: white;
 }

 wb-step, 
 wb-context{
     padding-bottom: 14px;
 }

wb-step{
    padding-bottom: 12px;
    margin-top: -3px;
}

wb-context{
    margin-top: -3px;
}

wb-context, 
wb-context > header{
    padding-bottom: 15px;
    padding-left: 10px;
}

wb-context,
wb-context > contains{
    width: 200px;
    overflow: visible;
}

/* end tab-related code */

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-workspace > wb-contains{
    padding-top: 15px;
}

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;
    z-index: 10;
    /* Necessary for dragging events. */
    pointer-events: none;
}


wb-context > wb-contains::after{
    content: "";
    height: 1px;
    display: block;
    visibility: none;
    clear: both;
}


/* 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: inline-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;
}

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;
    margin-bottom: 0;
    padding-top: 3px;
    padding-left: 5px;
    padding-bottom: 10px;
    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; */
    border: 0;
    right: -3px;
}


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;
}

.selected-block {
    outline: 3px solid goldenrod;
}


/********************************
*
* Don't allow interaction in menu
*
*********************************/

sidebar wb-context *,
sidebar wb-step *,
sidebar wb-expression *,
wb-local wb-context *,
wb-local wb-step *,
wb-local wb-expression *{
    pointer-events: none;
}
wb-local wb-context input,
wb-local wb-step input,
wb-local wb-expression input{
    pointer-events: auto;
}

sidebar wb-disclosure,
wb-local wb-disclosure{
    display: none;
}

/* Used for input resizing */

.sekrit-svg, .hidden {
    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;
}