@import '../../styles/variables.less';


@resize-prefix-cls: ~'@{mana-prefix}-resize';

.@{resize-prefix-cls} {
  &-handle-horizontal{
    position: relative;
    z-index:2;
    width:4px;
    height:100%;
    margin-right:-2px;
    margin-left:-2px;
    background: transparent;
    cursor: col-resize;
    transition: background-color .1s ease-out;

    &:hover {
      background-color: #167cdb;
    }

    &:hover.with-color::before {
      background: none;
    }

    &::before {
      position: absolute;
      top:0;
      left:2px;
      width:1px;
      height: 100%;
      content: '';
    }
  }

  &-handle-vertical{
    position: relative;
    z-index:2;
    width:100%;
    height:4px;
    margin-top:-2px;
    margin-bottom:-2px;
    background: transparent;
    cursor: row-resize;
    transition: background-color .1s ease-out;

    &:hover {
      background-color: #167cdb;
    }

    &:hover.with-color::before {
      background: none;
    }

    &::before {
      position: absolute;
      top:2px;
      left:0;
      width: 100%;
      height:1px;
      content: '';
    }
  }

  &-overflow-hidden {
    overflow: hidden !important;
  }

  &-with-color::before {
    background: #43484d;
  }

  &-active {
    background-color: #167cdb;
  }

  &-active.with-color::before {
    background: none;
  }

  &-no-resize {
    cursor: auto;
  }

}