ul.sequence{
    position:relative;
    @include clearfix;
}
li.sequence-member{
    @include clearfix;
    position:relative;

    &:hover{
        background-color:$color-input-focus;

        .sequence-member-inner{
            > .struct-block > label,
            > .char_field > label,
            .sequence > label{
                opacity:1;
            }
        }
    }

    &:hover .object-help{
        opacity:1;
    }

   
    .struct-block .fields{
        @include column(10);
        padding-left:0;
        padding-right:0;
    }
    .struct-block .sequence-container{
        @include column(9);
        padding-left:0;
        padding-right:0;

        .sequence-member-inner{
            padding:1.5em 0;
            padding:1.5em 0;
        }
    }

    /* The top level sequence doesn't have a sequnce-member-inner. This block is basically for things that should only affect inner blocks */
    .sequence-member-inner{
        @include clearfix;
        position:relative;
        padding:1.5em 50px;

        /* sequences within sequences, such as a ListBlock within StructBlock*/
        > .sequence .sequence-inner{
            @include column(10);
            padding-left:0;
            padding-right:0;
        }

        .sequence-type-list .sequence-container-inner{
            @include column(10);
            padding-left:0;
            padding-right:0;
        }
        .sequence-type-list .sequence-member-inner{
            padding:0;
            padding-top:0.5em;
            padding-bottom:1.2em;
        }
    }


    .fields > li{
        position:relative;
    }
}

/* Image chooser as direct descendant of top-level streamfield has special display */
.sequence-member-inner > .widget-admin_image_chooser{
    label{
        display:none;
    }
    .field-content{
        display:block;
        float:none;
        width:100%;
        text-align:center;
        max-width:500px;
        margin:auto;
        border:1px solid $color-grey-4;
        padding:1em;
    }
    .chooser{
        .chosen{
            padding:0;
        }
        .unchosen{
            &:before{
                float:none;
                font-size:4em;
                margin:0;
            }
        }
        .preview-image{
            float:none;
            margin:0;
        }
    }
    .actions li{
        display:inline-block;
        float:none;
    }
}

/*
This horridly specific selector ensures text inputs, rich text fields and textareas that are direct children of highest level sequence
should be borderless and full-width
*/
.block_field > .field-content > .input > .sequence-container > .sequence-container-inner > .sequence > .sequence-member > .sequence-member-inner{
    > .widget-text_input input,
    > .widget-rich_text_area .richtext,
    > .widget-textarea textarea{ 
        border:0;
        padding:0;
        background-color:transparent;
        max-width:1024px;
    }
}

/* Controls for ordering and deletion of items in a sequence */
.sequence-controls{
    @include border-radius(5px);
    @include transition(opacity 0.2s ease);
    opacity:0;
    visibility:hidden;
    position:absolute;
    top:-1.5em; right:1em;
    z-index:1;
    overflow:visible;
    background-color:$color-input-focus;
    padding:0.2rem 1em;

    h3{
        margin:0;
        font-size:0.7rem;
        display:inline-block;
        margin-right:1em;
        line-height:1.4rem;

        label{
            font-weight:normal;
            text-transform:uppercase;
            float:none;
            width:auto;
            padding:0;
            margin:0;
        }
    }

    button.icon.text-replace{
        @include border-radius(50%);
        width:1.4rem;
        height:1.4rem;

        &:before{
            line-height:1.3em;
            font-size:0.9rem;
        }
    }

    /* .buttons only exists for menus in stream_member.html */
    .buttons{
        display:inline-block; 
    }

    .buttons,
    label{
        @include transition(opacity 0.2s ease);
        opacity:0.4;
    }

        &:hover .buttons,
        &:hover label{
            opacity:1;
        }
   
    .disabled{
        display:none;
    }       
}

/* list controls are slightly different as they require closer proximity to their associated fields */
.list-controls{
    top:1.5em
}

.sequence-type-list .object-help{
    margin-top:1.5em !important;
}

/* Menu of other blocks to be added at each position */
.stream-menu{
    @include transition(all 0.2s ease);
    @include box-shadow(inset 0 0 45px rgba(0,0,0,0.3));
    position:relative;
    background-color:$color-grey-1;
    opacity:1;
    z-index:5;

    .toggle{
        @include transition(color 0.2s ease);
        @include border-radius(50px);
        position:absolute;
        top:-0.5em;
        left:0;
        right:0;
        margin:0 auto;
        cursor:pointer;
        font-size:1.7em;
        width:1em;
        height:1em;
        display:block;
        z-index:5;
        color:$color-grey-1;
        background-color:white;
        outline:none;

        span{
            @include visuallyhidden();
        }

        &:before{
            @include transform(rotate(-45deg));
            position:absolute;
            font-family:wagtail;
            content:"B";
            line-height:1em;
            text-align:center;
        }
    }

    .stream-menu-inner{
        @include transform(translate3d(0,0,0));
        max-width:50em;
        margin: auto;
        overflow:hidden;
    }

    ul{
        @include transform(translate3d(0,0,0));
        @include transition(all 0.2s ease);
        @include transform(scale(1));
        @include clearfix;
        visibility:visible;
        opacity:1;
        padding:1em 1em 0 1em;
        overflow:hidden;
    }

    li{
        @include column(3);
        padding-bottom:$grid-gutter-width;
        padding-left:0;
        padding-right:0;

        &:nth-child(4n+1){
            clear:left;
        }
    }
    

    button{
        @include transition(all 0.2s ease);
        background-color:transparent;
        border:0;
        color:darken($color-grey-3, 5%);
        height:auto;
        display:block;
        width:100%;
        padding:0 0 0.5em 0;
        outline:$color-teal;
        overflow:visible;

        span{
            text-transform:none;
            white-space: pre-wrap;
            width:100%;
            display:block;
            overflow:hidden;
            padding:0 1em;
            box-sizing: border-box;
        }

        &:before{
            display:block;
            font-family:wagtail;
            font-size:2em;
            width:100%;
            height:2em;
            line-height:2em;
            text-align:center;
        }

        &:hover,
        &:focus{
            background-color:$color-teal;
            color:white;
        }
    }

    &.stream-menu-closed{
        @include box-shadow(none);

        .stream-menu-inner ul{
            @include transform(scale(0.9));
            opacity:0;
        }

        .toggle{
            color:$color-grey-3;
            background-color:white;
            &:before{
                @include transform(rotate(0deg));
            }
            &:focus{
                color:$color-teal;
            }
        }        

        &:hover{
            border-top-color:$color-teal;

            .toggle{
                color:$color-teal;
            }
        }   
    }

    @media screen and (min-width: $breakpoint-mobile){
        li{
            @include column(2);
            &:nth-child(4n+1){
                clear:none;
            }
            &:nth-child(6n+1){
                clear:left;
            }
        }
    }
}
.sequence-member .stream-menu{
    margin:auto auto 0em auto;
}
.sequence-member .stream-menu-closed{
    opacity:0;
    visibility:hidden;
}
.sequence-member:hover{
    .sequence-controls{
        visibility:visible;
        opacity:1;
    }
    .stream-menu{
        visibility:visible;
        opacity:1;
    }
}

@media screen and (min-width: $breakpoint-mobile){
    .object li.sequence-member:hover .object-help{
        opacity:1;
    }

}
