// main toolbar layout
.lasso--toolbar_wrap {

    width: auto;
    left: 50%;
    .translate(-50%, 0);

    &.toolbar-extended {

    }

}

// global styles wrapper for editor and toolbar controls
.lasso-editor-controls--wrap {

    * { .box-sizing(border-box); }

    .editor--tool__bg();
    height:@toolbar--height;
    font-size:16px;
    border-radius:@editor--radius;
    position:fixed;
    text-align: center;
    bottom:@toolbar--pos__bottom;
    z-index: @z-index--toolbar;
}


// global styles  ul for the editor and toolbar controls
ul.lasso-editor-controls{
    margin:0;
    padding:0;
    letter-spacing: 0;
    list-style: none;
    height:@toolbar--height;
    line-height:1;
    .clearfix();

    li {
        height:@toolbar--height - 2;
        position:relative;
        float:left;
        padding:@toolbar--item__padding;
        border-right:1px solid lighten(@toolbar--border,5);
        text-align: center;
        text-shadow:0 1px 1px @text-shadow;
        line-height:1;
		margin:0;

        &:before {
            .editor-icon-font();
            .transition(all .2s ease);
            position: relative;
            top:10px;
        }

        &:first-child:hover {
            border-top-left-radius: @editor--radius;
            border-bottom-left-radius: @editor--radius;
        }

        &:last-child {
            border-right:0;

            &:hover {
                border-top-right-radius: @editor--radius;
                border-bottom-right-radius: @editor--radius;
            }
        }

        &:hover {
            cursor: pointer;
            background: @toolbar--hover;
        }

        &:active {
            .box-shadow(inset 0 1px 1px rgba(0,0,0,0.4));
        }
    }
}

// toolbar buttons
#lasso-toolbar--bold:before {
    content:'\ea62';
}
#lasso-toolbar--italic:before {
    content:'\ea64';
}
#lasso-toolbar--underline:before {
   content:'\ea63';
}
#lasso-toolbar--strike:before {
    content:'\ea65';
}
#lasso-toolbar--link:before {
    content:'\e9cb';
}
#lasso-toolbar--ol:before {
    //content:'OL';
	content: "\e9b9";
    top:9px;
	font-size:18px;
    //font-weight:bold;
    letter-spacing: 0.05em;
}
#lasso-toolbar--ul:before {
    //content:'UL';
	content: "\e9bc";
    top:9px;
	font-size:18px;
    //font-weight:bold;
    letter-spacing: 0.05em;
}

#lasso-toolbar--h2:before {
    content:'H2';
    top:9px;
    font-size:18px;
    font-weight:bold;
    letter-spacing: 0.05em;
}
#lasso-toolbar--h3:before {
    content:'H3';
    top:9px;
    font-size:18px;
    font-weight:bold;
    letter-spacing: 0.05em;
}
#lasso-toolbar--h4:before {
    content:'H4';
    top:9px;
    //font-size:17px;
    font-weight:bold;
    letter-spacing: 0.05em;
}
#lasso-toolbar--h5:before {
    content:'H5';
    top:9px;
    //font-size:17px;
    font-weight:bold;
    letter-spacing: 0.05em;
}
#lasso-toolbar--h6:before {
    content:'H6';
    top:9px;
    //font-size:17px;
    font-weight:bold;
    letter-spacing: 0.05em;
}
#lasso-toolbar--html:before {
    content:'\ea7f';
}
#lasso-toolbar--components:before {
    content:'\ea0a';
}

#lasso-toolbar--color-set:before {
    content:'A';
	//top:5px;
    //font-size:21px;
    font-weight:bold;
    letter-spacing: 0.05em;
	//color: #ff0;
	//font-family:Dashicons;
}

#lasso-toolbar--color-pick:before {
    //content:'\f309';
	content:'\f100';
	//color: #ff0;
	font-family:Dashicons;
}

#lasso-toolbar--left-align:before {
    content:'\f206';
	font-family:Dashicons;
}

#lasso-toolbar--center-align:before {
    content:'\f207';
	font-family:Dashicons;
}

#lasso-toolbar--right-align:before {
    content:'\f208';
	font-family:Dashicons;
}


// html drop up
#lasso-toolbar--html {

    #lasso-toolbar--html__wrap{
        position: absolute;
        left:-10000px;
        .opacity(0);
    }

    &.html--drop-down,
    &.html--drop-up {

        * {
            .box-sizing(border-box);
            -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
        }
        box-shadow:none;
        background:@toolbar--hover;

       #lasso-toolbar--html__wrap{
            margin:0;
            padding:4px;
            .opacity(1);
            list-style-type: none;
            width:@toolbar--htmldrop__width;
            height:@toolbar--htmldrop__height;
            bottom:45px;
            border-radius:@editor--radius;
            left:-@toolbar--htmldrop__width / 2 + 16;
            background:@toolbar--bg__accent;

            &:after {
                content:'';
                position:absolute;
                width: 0;
                height: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 6px solid @toolbar--hover;
                left:0;
                right:0;
                bottom:-6px;
                text-align: center;
                margin:0 auto;
            }

            &:hover {
                cursor: default;
            }
        }

        #lasso-toolbar--html__inner {
            background: @toolbar--htmldrop__bg;
            color:@toolbar--htmldrop__color;
            height:@toolbar--htmldrop__theight;
            overflow: scroll;
            text-align: left;
            line-height: 1.25;
            padding:@toolbar--htmldrop__padding;
            border-radius: @editor--radius - 2;
            font-family: monospace;  /* monospace font */
            white-space: pre;        /* behave like <pre> */
            font-size: @toolbar--htmldrop__font-size;
            .box-shadow(inset 0 0 4px 1px rgba(0,0,0,0.25));

            &:empty:before {
                content: attr(placeholder);
                color:fadeout(@toolbar--htmldrop__color,50);
            }

            &:hover {
                cursor: text;
            }
            &:focus {
                outline: none;
            }
        }

        #lasso-toolbar--html__footer {
            text-align: right;
            font-family: @editor--font;
            padding:7px 2px 2px;
            height:@toolbar--htmldrop__fheight;

            a {
                font-size:@toolbar--htmldrop__font-size;
                font-weight:bold;
                padding:5px 7px 4px;
                line-height: 1;
                border-radius:@editor--radius - 2;
                display: inline-block;
                text-decoration: none;
                color:white;
                text-shadow:0 1px 1px @text-shadow;
            }

            // inset html
            #lasso-toolbar--html__insert {
                background:@editor--color__update;

                &:hover {
                    background: darken(@editor--color__update,7);
                }
                &:active {
                    background: darken(@editor--color__update,14);
                    .box-shadow(inset 1px 1px 2px rgba(0,0,0,0.4));
                }
            }

            // cancel
            .lasso-toolbar--html__cancel {
                color:@editor--color__error;
            }
			
			#lasso-toolbar--html__footer_desc {
			    text-align:left;
				color:white;
				font-size:14px;
			}
        }
    }
}

// html insert icons
#lasso-toolbar--html__footer ul.lasso-toolbar--html-snips {
    font-size:@toolbar--htmldrop__font-size - 2;
    line-height: 0;
    float:left;
    margin:0;
    padding-left:0;
    list-style:none;
    .clearfix();

    li {
        line-height: 0;
        height:25px;
        margin-right:4px;
        border:none;
        //background:@toolbar--htmldrop__bg;
        border:1px solid darken(@toolbar--htmldrop__bg,2);
        border-radius:@editor--radius;
        .box-shadow(inset 1px 1px 0 rgba(255,255,255,0.05));

        &:before {
            top:5px;
        }

        &:last-child {
            border-right:1px solid darken(@toolbar--htmldrop__bg,2);
        }
    }

    #lasso-html--h2:before {
        content:'H2';
    }
    #lasso-html--h3:before {
        content:'H3';
    }
    #lasso-html--ul:before {
        content:'UL';
    }
    #lasso-html--ol:before {
        content:'OL';
    }
	#lasso-html--table:before {
        //content: "\f509";
		//content: "Table";
    }
}

// components drop up
#lasso-side-comp-button,
#lasso-toolbar--components{

    ul {
        position: absolute;
        left:-10000px;
        .opacity(0);
    }

    // drop up menu
    &.toolbar--drop-down,
    &.toolbar--drop-up,
	&.toolbar--side	{

        * { .box-sizing(border-box); }
        box-shadow:none;
        //background:@toolbar--hover;

        ul {
            margin:0;
            padding:4px;
            .opacity(1);
            list-style-type: none;
            width:@toolbar--drop__width;
            height:auto;//@toolbar--drop__height;
            top:-@toolbar--drop__height - 6;
            border-radius:@editor--radius;
            left:-@toolbar--drop__width / 2 + 16;
            //background:@toolbar--bg__accent;
            line-height: 0;
            column-gap:0;

            &:after {
                content:'';
                position:absolute;
                width: 0;
                height: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 6px solid @toolbar--hover;
                left:0;
                right:0;
                bottom:-6px;
                text-align: center;
                margin:0 auto;
            }

            li {
                line-height:0;
                text-align: center;
                position:relative;
                font-size:20px;
                text-shadow:0 1px 1px @text-shadow;
                border-right:none;
                margin:1px;
                padding:2px;
                height:36px;
                width:40px;
                //background:lighten(@toolbar--bg,3);
                background:none;
                border-left:1px solid rgba(255,255,255,0.1);
                border-top:1px solid rgba(255,255,255,0.1);
                .box-shadow(1px 1px 0 rgba(0,0,0,0.3));

                &:before {
                    top:6px;
                }


                &:hover {
                    cursor: move;
                    background:@toolbar--bg;
                    border-radius: 0;
                }

                &.active,
                &:active {
                    .box-shadow(inset 0 1px 1px rgba(0,0,0,0.4));
                    background:darken(@toolbar--bg,4);
                }

                // icons on draggable items
                .editor--icon__list();

            }
        }

    }
}

// link drop up
#lasso-toolbar--link {

    * { .box-sizing(border-box); }

    // drop up
    #lasso-toolbar--link__wrap {
        position: absolute;
        left:-10000px;
        .opacity(0);
    }

    &.link--drop-down,
    &.link--drop-up {
        box-shadow:none;
        background:@toolbar--hover;

        #lasso-toolbar--link__wrap {
            margin:0;
            padding:4px;
            .opacity(1);
            list-style-type: none;
            width:@toolbar--linkdrop__width;
            height:@toolbar--linkdrop__height;
            bottom:45px;
            border-radius:@editor--radius;
            left:-@toolbar--linkdrop__width / 2 + 16;
            background:@toolbar--bg__accent;

            &:after {
                content:'';
                position:absolute;
                width: 0;
                height: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 6px solid @toolbar--hover;
                left:0;
                right:0;
                bottom:-6px;
                text-align: center;
                margin:0 auto;
            }

            &:hover {
                cursor: default;
            }
        }
        #lasso-toolbar--link__inner {
            background: @toolbar--htmldrop__bg;
            color:@toolbar--htmldrop__color;
            height:@toolbar--linkdrop__height - 38;
            white-space: nowrap;
            overflow: hidden;
            text-align: left;
            line-height: 1.25;
            padding:@toolbar--htmldrop__padding;
            border-radius: @editor--radius - 2;
            font-family: monospace;  /* monospace font */
            font-size: @toolbar--htmldrop__font-size;
            .box-shadow(inset 0 0 4px 1px rgba(0,0,0,0.25));

            &:empty:before {
                content: attr(placeholder);
                color:fadeout(@toolbar--htmldrop__color,50);
            }

            &:after {
                content:'';
                height:20px;
                width:20px;
                position:absolute;
                background: @toolbar--htmldrop__bg;
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
                right: 4px;
                top: 4px;
                height: 32px;
                width: 36px;
            }

            &:hover {
                cursor: text;
            }
            &:focus {
                outline: none;
            }
        }
    }

    // save link
    .lasso-toolbar--link__control {
        position: absolute;
        top:9px;
        right:5px;
        width:25px;
        font-family: @editor--font;
        font-size:@toolbar--htmldrop__font-size - 2;
        font-weight:bold;
        padding:5px 7px 4px;
        line-height: 1;
        border-radius:@editor--radius - 2;
        display: inline-block;
        text-decoration: none;
        color:white;
        text-shadow:0 1px 1px @text-shadow;
        background: @editor--color__update;

        &:before {
            .editor-icon-font();
            content:'\ea10';
        }
    }
	
	.styled-checkbox {
	    position: absolute;
        top:45px;
        left:8px;
	}
	label {
	    position: absolute;
        top:45px;
        left:41px;
		font-family: @editor--font;
		color: white;
		font-size:@toolbar--htmldrop__font-size - 2;
	}
}

// aesop not active
.ase-not-active {
    @width:94px;
    #lasso-toolbar--components {
        #lasso-toolbar--components__list {
            width:@width;
            left: ~'calc(50% - @{width} / 2)';
            height:48px;
            top:-55px !important;
        }
    }
}

#lasso-toolbar--components__list,#lasso-toolbar--link__wrap, #lasso-toolbar--html__wrap, .iris-picker{
    z-index: @z-index--toolbar+1;
}

//side component button
#lasso-side-comp-button.toolbar--side {
	background:none;
}
#lasso-side-comp-button:before {
	 content: "\f502";
	 font-family: dashicons;
    display: inline-block;
    font-weight: 400;
	font-size:30px;
}

#lasso-side-comp-button li {
    float: left;
}

#lasso-side-comp-button ul:after {
    content:none !important;
}


#lasso-side-comp-button li:before 
{
    font-family: icomoon-editus;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
    position: relative;
    top: 10px;
}


