.lasso--btn-primary {
    .editor-btn-primary();
}
.lasso--btn-secondary {
    .editor-btn-secondary();
}

.lasso--post-form {

    label {
        font-size: @modal--font__size;
        line-height: 1;
        margin-bottom: 8px;
        display: block;
        font-family: @editor--font;

        .lasso-icon-help {
            margin-left: 5px;
            position: relative;
            top:2px;
        }
    }

    // general input
    input[type="text"] {
        .editor--input();
    }

    .checkbox_label {
        display: inline-block;
    }

    .checkbox-control {
        position: relative;
        display: inline-block;
        padding-left: 28px;
        cursor: pointer;
        //color:#444;
        top:2px;

        input {
            position: absolute;
            opacity: 0;
            z-index: -1; /* Put the input behind the label so it doesn't overlay text */
        }

        input:checked ~ .control-indicator {
          color: @input--bg;
          background-color: @editor--color__update;
        }

        input:active ~ .control-indicator {
          color:@input--bg;
          background-color: @editor--color__update;
        }
    }

    .control-indicator {
        position: absolute;
        top: -1px;
        left: 0;
        display: block;
        width:  18px;
        height: 18px;
        line-height: 1rem;
        font-size: 65%;
        color: @input--bg;
        text-align: center;
        background-color: @input--bg;
        background-size: 50% 50%;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Checkbox modifiers */
    .checkbox .control-indicator {
      border-radius: .25rem;
    }
    .checkbox input:checked ~ .control-indicator {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
    }

    /* Radio modifiers */
    .radio .control-indicator {
      border-radius: 50%;
    }
    .radio input:checked ~ .control-indicator {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
    }

    /* Alternately, use another character */
    .control-x input:checked ~ .control-indicator {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjQsMEwwLDEuNGwwLjcsMC43bDEuOCwxLjhMMC43LDUuN0wwLDYuNGwxLjQsMS40bDAuNy0wLjdsMS44LTEuOGwxLjgsMS44bDAuNywwLjdsMS40LTEuNEw3LjEsNS43DQoJTDUuMywzLjlsMS44LTEuOGwwLjctMC43TDYuNCwwTDUuNywwLjdMMy45LDIuNUwyLjEsMC43QzIuMSwwLjcsMS40LDAsMS40LDB6Ii8+DQo8L3N2Zz4NCg==);
    }
    .control-dash input:checked ~ .control-indicator {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K)
    }

    // cancel button and set date to now button
	#lasso--postsettings-setnow,
    .lasso--postsettings-cancel {
        background: 0 0;
        color: @editor--color__error;
        position: relative;
        top: 3px;

        &:hover {
            color:darken(@editor--color__error,5);
            text-decoration: none;
        }
    }
	#lasso--postsettings-setnow {
	    font-size:16px;
	}

    // save button
    input[type="submit"] {
        .editor-btn-primary();
        float:right;
    }
}

// button group
.lasso--btn-group {
    text-align: center;

    a {
        margin:0;
        display: inline-block;
    }

    &.lasso--btn-group-small {
        a{
            font-size:14px;
        }
    }
}

// Notice
.lasso--notice {
    text-align: center;
    max-width:@notice--width;
    padding:@editor--padding;
    color:white;
    font-family: @editor--font;
    font-size:@editor--font__size;
    margin:@editor--padding auto;

    &.lasso--notice-warning {
        background:@editor--color__warning;
    }
    &.lasso--notice-info {
        background:@editor--color__update;
    }
    &.lasso--notice-error {
        background:@editor--color__error;
    }
    &.lasso--notice-success {
        background:@editor--color__success;
    }
}


// post status slider
#lasso--slider {
    position: relative;
    text-align: left;
    background: @rail--track__color;
    top:5px;
    height:@rail__height;
    border-radius:4px;
    .box-shadow(inset 1px 1px 1px rgba(0,0,0,0.2));

    // slider handle
    .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: @rail--handle__w;
        height: @rail--handle__h;
        cursor: default;
        -ms-touch-action: none;
        touch-action: none;
        background:@rail--handle__color;
        top:-6px;
        margin-left:-@rail--handle__w / 2;
        border-radius: 100%;
        .box-shadow(0 0 7px -1px rgba(0,0,0,0.75));

        &:focus,
        &:active {
            outline:none;
        }

        &:hover,
        &:active {
            .box-shadow(inset 0 0 6px rgba(0,0,0,0.5));
        }

        &:hover { border:4px solid @rail--handle__color; }

        &:active { border:4px solid darken(@rail--handle__color,3); }

        &:hover, &:focus, &:active { cursor: move; }
    }

}

// select cuistomizer
.lasso--select-wrap {
    position: relative;
    display: inline-block;
    color: @input--color;

    // the select item
    select {
        display: inline-block;
        width: 100%;
        margin: 0;
        line-height: @input--height;
        color: @toolbar--color;
        background-color: @modal--bg__accent;
        border: 0;
        padding:2px 25px 2px 12px;
        border-radius: @editor--radius;
        cursor: pointer;
        outline: 0;
        font-size:@input--font__size;
        -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
    }

    // Undo the Firefox inner focus ring
    select:focus:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #000;
    }

    // Dropdown arrow
    &:after {
        position: absolute;
        top: 50%;
        right: 12px;
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        margin-top: -.15rem;
        pointer-events: none;
        border-top: 4px solid @toolbar--color;
        border-right: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 4px solid transparent;
    }

    /* Hover state */
    /* Uncomment if you need it, but be aware of the sticky iOS states.
    .select select:hover {
      background-color: #ddd;
    }
    */

    // open
    select:active {
        color: @input--color;
        background-color: @modal--bg__accent;
    }

    // Hide the arrow in IE10 and up
    select::-ms-expand {
        display: none;
    }

    // Media query to target Firefox only
    @-moz-document url-prefix() {
        /* Firefox hack to hide the arrow */
        select {
            text-indent: 0.01px;
            text-overflow: '';
            padding-right: 1rem;
        }

        /* <option> elements inherit styles from <select>, so reset them. */
        option {
            background-color: white;
        } 
    }


}