.p8n-resize-area {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  overflow: visible;

  .area-button {
    position: absolute;

    &::before {
      content: "";
      position: absolute;
      transition-delay: 0.25s;
      transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }

    &:hover::before {
      background-color: var(--color-gray-5);
    }
  }

  &:where(.top, .bottom) {
    height: 0;
    width: 100%;

    .area-button {
      left: 0;
      right: 0;
      width: 100%;
      height: var(--resize-grip);
      cursor: row-resize;

      &::before {
        left: 0;
        right: 0;
        height: var(--resize-indicator);
      }
    }
  }

  &:where(.left, .right) {
    width: 0;
    height: 100%;

    .area-button {
      top: 0;
      bottom: 0;
      height: 100%;
      width: var(--resize-grip);
      cursor: col-resize;

      &::before {
        top: 0;
        bottom: 0;
        width: var(--resize-indicator);
      }
    }
  }

  &.top {
    bottom: auto;

    .area-button {
      top: calc(-1 * var(--resize-grip) / 2);

      &::before {
        top: calc(50% - var(--resize-indicator) / 2);
      }
    }
  }

  &.bottom {
    top: auto;

    .area-button {
      bottom: calc(-1 * var(--resize-grip) / 2);

      &::before {
        bottom: calc(50% - var(--resize-indicator) / 2);
      }
    }
  }

  &.right {
    left: auto;

    .area-button {
      right: calc(-1 * var(--resize-grip) / 2);

      &::before {
        right: calc(50% - var(--resize-indicator) / 2);
      }
    }
  }

  &.left {
    right: auto;

    .area-button {
      left: calc(-1 * var(--resize-grip) / 2);

      &::before {
        left: calc(50% - var(--resize-indicator) / 2);
      }
    }
  }
}