// Variables
// ========================================================================

@resizer-drag-handle-z-index:                  @global-z-index + 20;
@resizer-drag-backdrop-z-index:                @global-z-index + 10;
@resizer-drag-backdrop-background:             rgba(0, 102, 255, 0.05);
@resizer-background-color:                     darken(@global-border, 5%);
@resizer-dark-background-color:                @global-dark-border;

/* ========================================================================
   Component: Pagination
 ========================================================================== */


.uk-resizer {
  background: @resizer-background-color;
  position: relative;
  opacity: 0.7;

  &:hover, &:focus {
    opacity: 1;
  }

  .dark & {
    background-color: @resizer-dark-background-color;
  }

  &.x {
    min-width: 3px;
    width: 3px; // For IE, Edge
    cursor: ew-resize;

    .uk-resizer-drag-handle {
      width: 3px;
      height: 100%;
    }
  }

  &.y {
    min-height: 3px;
    height: 3px; // For IE, Edge
    cursor: ns-resize;

    .uk-resizer-drag-handle {
      height: 3px;
      width: 100%;
    }
  }
}

.uk-resizer-drag-handle {
  z-index: @resizer-drag-handle-z-index;
  background: @resizer-background-color;
  position: absolute;

  .dark & {
    background-color: @resizer-dark-background-color;
  }
}

.uk-resizer-drag-backdrop {
  z-index: @resizer-drag-backdrop-z-index;
  background: @resizer-drag-backdrop-background;
  position: fixed;
}