@bg_color: #e6f7ff;
@text_color: #1890ff;
@shadow_color: #1890ff;

._shadow_border(@offset_x: -2px,@offset_y:0,@bg_color:@bg_color) {
  background-color: @bg_color;
  color: @text_color;
  box-shadow: inset @offset_x @offset_y @shadow_color;
}

//default left
._li_border(@offset_x: 2px,@offset_y:0,@bg_color:@bg_color) {
  .node {
    transition: 0.2s;
  }

  &.selected .node {
    ._shadow_border(@offset_x, @offset_y, @bg_color);
  }
}

.select-style-border {
  &.z-grid, & .z-grid,
  &.z-listview, & .z-listview {
    li.item { //list
      ._li_border();
    }
    tr.item { //grid
      transition: 0.2s;
      &.selected {
        ._shadow_border(2px, 0);
      }
    }
  }

  &.z-tabs, & .z-tabs {
    &.top {
      li.item {
        ._li_border(0, -2px, transparent);
      }
    }
    &.bottom {
      li.item {
        ._li_border(0, 2px, transparent);
      }
    }
    &.right {
      li.item {
        ._li_border(-2px, 0, transparent);
      }
    }
    &.left {
      li.item {
        ._li_border(2px, 0, transparent);
      }
    }
    li.item {
      .node {
        color: #777;
        border: none;
      }
    }
  }
  &.right-border {
    &.z-grid, & .z-grid,
    &.z-listview, & .z-listview {
      li.item { //list
        &.selected .node {
          box-shadow: inset -2px 0 @shadow_color;
        }
      }
      tr.item { //grid
        &.selected {
          box-shadow: inset -2px 0 @shadow_color;
        }
      }
    }
  }
}
