// modal outer
.lasso--modal{
    top:10vh;

    &.lasso--modal__full {

        width:100%;
        max-width:@modal--width__full;

        .lasso--modal__inner {
            display: block;
            padding:@modal--padding * 2;
            .clearfix();
        }
    }

}

#lasso--all-posts__modal {

    #lasso--loading {
        position: absolute;
        height:90%;
    }

}

ul.lasso--post-object-list,
ul.lasso--post-list {
    text-align: left;
    list-style:none;
    margin:0;
    padding:0;

    li {
        display: block;
        position: relative;
        width:100%;
        list-style-type: none;
        margin-bottom:7px;
        font-size:@modal--font__size;
        font-family: @editor--font;
        font-weight:bold;
    }
}

// post object list
ul.lasso--post-object-list {
    width:@list--sb__width;
    float:left;
    height:100%;

    li {
        line-height: @list--item__line-height / 2;
        margin-bottom: 0;
        font-family: @editor--font;
        font-weight: normal;
        .transition(opacity .15s ease);

        &:not(.active) {
            .opacity(0.45);
        }

        &:hover {
            cursor: pointer;
            .opacity(1);
        }

    }

}

// post filtering
.lasso--post-filtering {
    padding:0 @search--padding;
    width: ~'calc( 100% - @{list--sb__width})';
    height:@search--height;
    float:right;
    .clearfix();

    .lasso--search__results,
    .lasso--search {
        float:left;
    }

    // search results div
    .lasso--search__results {
        opacity:0;
        .transition(opacity .2s ease);
        width:60%;
        font-size:@input--font__size;

        span {
            font-weight:bold;
            margin-right:4px;
        }
    }

    // teh search input contianer
    .lasso--search {
        width:40%;
        overflow: hidden;
        position: relative;

        #lasso--search__toggle,
        input {
            .transition(right .15s linear);
        }

        // icon
        #lasso--search__toggle {
            position: relative;
            top: @search--icon__offset / 2;
            right: -@search--input__size - @search--icon__offset;

            &:before {
                .opacity(0.5);
                .transition(opacity .15s ease);
            }

            &:hover {
                cursor: pointer;
                &:before { .opacity(0.9); }
            }
        }

        // the input
        input {
            float:right;
            width:@search--input__size;
            right:-@search--input__size;
            .editor--input();
            height:@input--height + 2;

            &:focus {
                box-shadow:none;
            }
        }

        // when visible
        &.lasso--search__visible {

            #lasso--search__toggle {
                right:-@search--icon__offset;

                &:before { .opacity(0.9); }
                &:hover:before { .opacity(0.5); }
            }

            input { right:0; }
        }
    }
}

// Character helper
#lasso--helper {
    position:absolute;
    right:4px;
    top:4px;
    font-size:@modal--font__size - 2;
    padding:2px 6px;
    background:@modal--bg__accent;
    color:white;
    border-radius:2px;
    font-family:Arial;
}


// Clear Search Icon
#lasso--clear-search {
    position:absolute;
    right:7px;
    top:7px;
    color:@modal--color-dark;
    z-index:1;

    &:hover {
        color:darken(@modal--color-dark,5);
        cursor:pointer;
    }
}


// empty state
.lasso--empty-state {
    max-width:200px;
    text-align:center;
    color:@gray;
    margin: 0 auto;
    top: 40%;
    position: relative;

    .lasso--empty-state-icon {
        font-size:@icon--size__large;
    }

    p {
        margin-bottom:0;
        font-family:@editor--font;
        font-size:90%;
        font-weight:bold;

        + a {
            margin-top:@editor--padding;
        }
    }
}


// list of posts
ul.lasso--post-list {
    float:left;
    padding:0 @modal--padding;
    width: ~'calc( 100% - @{list--sb__width})';
    overflow:hidden;
    position: relative;
    height:520px;
    border-left:1px solid @base--dark;
    .box-shadow(inset 1px 0 1px -1px rgba(255,255,255,0.15));

    li {
        overflow: hidden;
        line-height: @list--item__line-height;
    }

    .lasso--post-list__item {
        color:@modal--color-dark;
        display: block;
        padding:@list--item__padding;
        background: fadeout(@list--item__bg,25);
        text-decoration: none;
        border-radius: @editor--radius;
        .transition(all .15s ease);
        font-family: @editor--font;
        font-weight: normal;
        width:100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        // post status
        &:before {
            content:'';
            height:@status--h;
            width:@status--w;
            border-radius: 100%;
            margin-right: @status--h;
            display: inline-block;
        }

        &.draft:before { background:@status--draft; }
        &.publish:before { background:@status--publish; }
        &.pending:before { background:@status--pending; }

        &:hover{
            background: @list--item__bg;
            text-decoration: none;
            width:~'calc( 100% - @{list--control__width})';

            .lasso--post-list__controls {
                right:0;
            }
        }

        &:active {
            outline: none;
            background: @list--item__bg;
            text-decoration: none;
            .box-shadow(inset 1px 1px 2px rgba(0,0,0,0.5));
        }

        &:focus {
            outline: none;
        }

        &.no-delete:hover {
            @new-width: @list--control__width / 2;

            width:~'calc( 100% - @{new-width})';

        }

    }

}

// post controls within a list
.lasso--post-list__controls {
    position: absolute;
    right:0;
    top:0;
    width:@list--control__width;
    text-align: right;
    right:-@list--control__width;
    height:@list--item__line-height;
    .transition(right .15s ease);

    span {
        color:darken(@modal--color,50);
        display: inline-block;
        width:@list--item__line-height;
        height:@list--item__line-height;
        background: @list--item__bg;
        border-radius: @editor--radius;
        position: relative;

        &:after {
            .editor-icon-font();
            text-align: center;
            font-size:18px;
            position: absolute;
            z-index: 2;
            top:16px;
            left:16px;
        }

        &:hover {
            color:darken(@modal--color,50);
            background: fadeout(@modal--bg__accent,50);
        }
        &:active {
            background: @list--item__bg;
            text-decoration: none;
            .box-shadow(inset 1px 1px 2px rgba(0,0,0,0.5));
        }
    }

    #lasso--post__edit{
        margin-right:3px;
        &:hover {
            color:@modal--color;
            background: @editor--color__update;
        }
        &:after {
            content:'\e908';
        }
    }

    #lasso--post__delete{
        &:hover {
            color:@modal--color;
            background: @editor--color__error;
        }
        &:after {
            content:'\e9ad';
        }
    }
}

// load more
#lasso--load-more, #lasso--close-modal-posts {
    .editor-btn-secondary();
    font-size:@input--font__size;
    text-transform: uppercase;
    line-height:2;
    margin-top:@editor--padding;
    .opacity(0.66);
}


.editus-firstp:empty:before{
  content:attr(placeholder);
  color:grey;
  font-style:italic;
}