@import '../core';

@mixin resizable-wrapper {
  position: relative;
  @content;
}

@mixin resizable-handle-hover {
  &::after {
    background-color: $ec-color-link;
  }
}

@mixin resizable-handle {
  .handle {
    position: absolute;
    right: -7px;
    width: 13px;
    height: 100%;
    top: 0;
    padding: 0 5px;
    z-index: map-get($map: $ec-z-indexes, $key: splitter);

    &::after {
      content: '';
      display: block;
      transition: background-color .3s ease;
      height: 100%;
      position: relative;
      // z-index: 1;
    }
    
    &:hover {
      cursor: col-resize;
      @include resizable-handle-hover();
    }

    @content;
  }
}

@mixin resizable-content {
  .content {
    overflow: hidden;
    @content;
  }
}

@mixin resizable-active {
  &.is-active {
    user-select: none;

    .handle {
      @include resizable-handle-hover();
    }
  }
}

