// iOS
.os-ios {
    .lasso-component--controls {
        .opacity(1);
        left:0;
    }
}

// small screens
@media(max-width:600px) {

    // editor controls
    .lasso-editing {
        .lasso--toolbar_wrap.ase-not-active,
        .lasso--toolbar_wrap.toolbar-extended,
        .lasso--toolbar_wrap.ase-not-active.toolbar-extended,
        .lasso--toolbar_wrap {
            border-radius: 0;
            //top:0;
            width:100%;
            left:0;
            right:0;
            .translate(0, 0); // This combined with left:0 removes centering. Without it, the toolbar has a negative margin.
            height:auto; // Allow toolbar natural height and icon wrapping for extra small screens
            bottom:auto; // Allow toolbar natural height and icon wrapping for extra small screens
        }
        .lasso--controls__right {
            z-index: 1000; // clears toolbar wrap
            top:auto; // keep on bottom so as to not overlap controls, which are now on the top. Change if toolbar is given enough left and right margin
            right:0;

            a {
                background:none;
            }

            #lasso--save{
               // background: none;
                &:before {
               //     color:@editor--color__update;
                    top:3px;
                }
            }
        }

        #lasso-toolbar--link.link--drop-down,
        #lasso-toolbar--html.html--drop-down {
            position: static;

            #lasso-toolbar--link__wrap,
            #lasso-toolbar--html__wrap {
                left:0;
                right:0;
                //top:44px;
                //bottom:auto;
				top:auto;
                bottom:50px;
                width:90%;

                &:after {
                    margin:0;
                    top:-6px;
                    border-top: none;
                    border-bottom: 6px solid @toolbar--hover;
                }
            }
        }
        #lasso-toolbar--link.link--drop-down #lasso-toolbar--link__wrap:after { left:142px; }
        #lasso-toolbar--html.html--drop-down #lasso-toolbar--html__wrap:after { left:175px; }

        #lasso-toolbar--components.toolbar--drop-down {

            position: static;

            ul {
                top:44px;
                left:0;
                right:0;
                width:100%;

                &:after {
                    left:206px;
                    margin:0;
                    top:-6px;
                    border-top: none;
                    border-bottom: 6px solid @toolbar--hover;
                }
            }
        }

        .toolbar-extended {
            #lasso-toolbar--link.link--drop-down #lasso-toolbar--link__wrap:after { left:222px; }
            #lasso-toolbar--html.html--drop-down #lasso-toolbar--html__wrap:after { left:255px; }
            #lasso-toolbar--components.toolbar--drop-down ul:after { left:288px; }
        }

    }

    // all posts modal @since 0.9.4
    #lasso--all-posts__modal {

        ul.lasso--post-list,
        ul.lasso--post-object-list {
            float:none;
            width:100%;
            display:block;
        }

        ul.lasso--post-object-list {
            margin-bottom:@editor--padding * 2;
            padding-bottom:@editor--padding;
            border-bottom:1px solid @base--dark;
            .box-shadow(0 1px 1px -1px rgba(255,255,255,0.15));

            li {
                display:inline-block;
                width:auto;
                margin-right:@editor--padding * 2;
                font-size:90%;
            }
        }

        ul.lasso--post-list {
            padding-left:0;
            border:none;
            box-shadow:none;
        }
    }

    // global modal
    .lasso--modal {
        //display: block;

        .lasso--modal__inner,
        &.lasso--modal__full .lasso--modal__inner {
            border-radius:0;
            padding:@editor--padding;
        }
    }

}

.lasso-mobile {
	#lasso--exit {
	   float:none;
	}
}


// for tablet
@media (min-width: 601px) {
	.lasso-mobile{
			// drop up menu
			.toolbar--drop-up{
				ul {
					&:after {
						margin:0;
						top:-9px;
						border-top: none;
						border-bottom: 6px solid @toolbar--hover;
					}
				}
			}
			
			#lasso-toolbar--html__wrap,
			#lasso-toolbar--link__wrap{
			    &:after {
					 margin:0;
                    top:-9px;
                    border-top: none;
                    border-bottom: 6px solid @toolbar--hover;
				}
			}
	}
	.lasso-mobile.lasso--toolbar_wrap {
		    width:100%;
	}
}