@use '../style/common/var' as *;

.pagoda-resize-container {
  display: flex;

  --pd-resize-container-bar-size: 7px;
  --pd-resize-container-bar-offset: calc(
    (var(--pd-resize-container-bar-size) + 1px) / 2
  );
  --pd-resize-container-bar-border-offset: calc(
    var(--pd-resize-container-bar-offset) - 1px
  );
  --pd-resize-container-bar-border-color: var(--el-border-color-lighter);
  --pd-resize-container-bar-z-index: 1;

  &--direction-column {
    flex-direction: column;
  }

  &--direction-row &__drag-bar {
    top: 0;
    right: calc(var(--pd-resize-container-bar-offset) * -1);
    width: var(--pd-resize-container-bar-size);
    height: 100%;
    cursor: col-resize;

    &::before {
      left: var(--pd-resize-container-bar-border-offset);
      width: 1px;
      height: 100%;
    }
  }

  &--direction-column &__drag-bar {
    left: 0;
    bottom: calc(var(--pd-resize-container-bar-offset) * -1);
    height: var(--pd-resize-container-bar-size);
    width: 100%;
    cursor: row-resize;

    &::before {
      top: var(--pd-resize-container-bar-border-offset);
      height: 1px;
      width: 100%;
    }
  }

  &--direction-row.pagoda-resize-container--reverse {
    flex-direction: row-reverse;

    .pagoda-resize-container__drag-bar {
      left: calc(var(--pd-resize-container-bar-offset) * -1);
      right: auto;
    }
  }

  &--direction-column.pagoda-resize-container--reverse {
    flex-direction: column-reverse;

    .pagoda-resize-container__drag-bar {
      top: calc(var(--pd-resize-container-bar-offset) * -1);
      bottom: auto;
    }
  }

  &--draging &__resize-area,
  &--draging &__flex-area {
    user-select: none;
  }

  &__resize-area {
    position: relative;
    box-sizing: border-box;
  }

  &__drag-bar {
    position: absolute;
    z-index: var(--pd-resize-container-bar-z-index);
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      display: block;
      background-color: var(--pd-resize-container-bar-border-color);
    }
  }

  &__flex-area {
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
  }
}