/**
 * Copyright 2016 IBM Corp.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 **/


 .red-ui-editableList-container {
     border: 1px solid $form-input-border-color;
     border-radius: 4px;
     padding: 5px;
     margin: 0;
     vertical-align: middle;
     box-sizing: border-box;

     .red-ui-editableList-list {
         list-style-type:none;
         margin: 0;
     }
     .red-ui-editabelList-item-placeholder {
         border: 2px dashed $secondary-border-color !important;
     }
     li {
         box-sizing: border-box;
         position: relative;
         background: #fff;
         margin:0;
         padding:8px 0px;
         border-bottom: 1px solid $secondary-border-color;
         min-height: 20px;
         .red-ui-editableList-item-handle {
             position: absolute;
             top: 50%;
             left: 2px;
             margin-top: -7px;
             color: #eee;
             cursor: move;
         }
         .red-ui-editableList-item-remove {
             position: absolute;
             top: 50%;
             right: 0px;
             margin-top: -9px;
         }
         &.ui-sortable-helper {
             border-top: 1px solid $secondary-border-color;
         }
         //.red-ui-editableList-item-content { outline: 1px solid red}

         &.red-ui-editableList-item-sortable .red-ui-editableList-item-content {
             margin-left: 22px;
         }
         &.red-ui-editableList-item-removable .red-ui-editableList-item-content {
             margin-right: 28px;
         }
         &.red-ui-editableList-item-deleting {
             background: #fee;
         }
     }

 }

[dir="rtl"] .red-ui-editableList-container {
    li {
        .red-ui-editableList-item-handle {
            left: auto;
            right: 2px;
        }
        .red-ui-editableList-item-remove {
            right: auto;
            left: 0px;
        }
    }
}