$prefix-cls: "#{$namespace}-fold-layout";

.#{$prefix-cls} {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex: 1;
  &-aside {
    height: 100%;
    overflow: hidden;
  }
  &-line {
    position: relative;
    &-control {
      // width: 8px;
      height: 100%;
      position: relative;
      transition: all ease-in-out 0.2s;
      transition-delay: 0.3s;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        // border-left: 1px solid $color-text-dividers;
      }

      &:hover {
        background-color: $color-primary-200;
        border-radius: 10px;
        overflow: hidden;
        cursor: col-resize;
      }
    }

    &-button {
      position: absolute;
      top: 50%;
      right: -10px;
    }

    &-bar {
      cursor: pointer;
      height: 72px;
      width: 32px;
      position: absolute;
      top: calc(50% - 36px);
      right: -18px;
      z-index: 10;

      .top,
      .bottom {
        position: absolute;
        width: 4px;
        border-radius: 2px;
        height: 38px;
        left: 8px;
        transition: background-color 0.3s cubic-bezier(0.42, 0, 0.21, 1), transform 0.3s cubic-bezier(0.42, 0, 0.21, 1);
        background-color: $color-gray-5;
      }
      .bottom {
        top: 34px;
      }

      &:hover {
        .top,
        .bottom {
          background-color: $color-gray-8;
        }
        .top {
          transform: rotate(12deg) scale(1.15) translateY(-2px);
        }
        .bottom {
          transform: rotate(-12deg) scale(1.15) translateY(2px);
        }
      }

      &.is-collapsed {
        right: -24px;
        &.right {
          left: -24px;
        }
        &:hover {
          .top {
            transform: rotate(-12deg) scale(1.15) translateY(-2px);
          }
          .bottom {
            transform: rotate(12deg) scale(1.15) translateY(2px);
          }
        }
      }

      &.right {
        right: unset;
        left: -18px;

        .top,
        .bottom {
          left: unset;
          right: 8px;
        }

        &:hover {
          .top,
          .bottom {
            background-color: $color-gray-8;
          }
          .top {
            transform: rotate(-12deg) scale(1.15) translateY(-2px);
          }
          .bottom {
            transform: rotate(12deg) scale(1.15) translateY(2px);
          }
        }

        &.is-collapsed {
          &:hover {
            .top {
              transform: rotate(12deg) scale(1.15) translateY(-2px);
            }
            .bottom {
              transform: rotate(-12deg) scale(1.15) translateY(2px);
            }
          }
        }
      }
    }

    &:hover {
      .#{$prefix-cls}-line-bar {
        // right: -32px;

        .top,
        .bottom {
          background-color: $color-gray-8 !important;
        }
        // &.right {
        //   left: -32px;
        // }
      }
    }
  }
  &-main {
    height: 100%;
    flex: 1;
    overflow: hidden;
  }

  &.vertical {
    flex-direction: column;

    .#{$prefix-cls} {
      &-main,
      &-aside {
        overflow-x: hidden;
        overflow-y: auto;
      }
      &-aside.is-collapsed {
        overflow: hidden;
      }
    }
  }

  .#{$prefix-cls}-line-bar.vertical {
    top: unset;
    right: unset;
    left: calc(50% - 36px);
    top: -26px;
    transform: rotate(90deg);

    &.right {
      bottom: -26px;
      top: unset;
    }
  }
  .#{$prefix-cls}-line-control.vertical {
    &:hover {
      cursor: row-resize;
    }
  }
  &:hover {
    .#{$prefix-cls}-line-bar {
      .top,
      .bottom {
        background-color: $color-gray-7;
      }
    }
  }
}
