@gutter-size: 6px;

.FW {
  position: relative;
  background: @colorBgLayout;

  > .header {
    width: 100%;
    height: 38px;
    padding: 0 6px;
  }

  > .body {
    position: relative;
    width: 100%;
    padding: 0 6px;
    height: calc(100% - 38px - 32px);

    display: flex;

    > .side {
      height: 100%;
    }

    > .split {
      flex: 1;
      width: 1px;
      height: 100%;
    }
  }

  > .footer {
    width: 100%;
    height: 32px;
    padding: 0 6px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    > .leading {
    }

    > .statusbar {
    }
  }

  // 分割容器
  &-split {
    position: relative;
    height: 100%;

    > .ca {
      position: absolute;
      top: 0;
      left: 0;
    }

    > .gutter {
      position: absolute;
      background-color: @colorBgLayout;
      border-radius: 4px;

      transition: background-color 0.2s ease-in-out;

      &:hover {
        background-color: @colorPrimary;
      }
    }

    > .cb {
      position: absolute;
      right: 0;
      bottom: 0;
    }

    &.vertical {
      > .ca,
      > .cb {
        width: 100%;
      }

      > .gutter {
        height: @gutter-size;
        width: 100%;
        cursor: row-resize;
      }
    }

    &.horizontal {
      > .ca,
      > .cb {
        height: 100%;
      }
      > .gutter {
        height: 100%;
        width: @gutter-size;
        cursor: col-resize;
      }
    }
  }

  // 容器内部的内容
  &-component {
    height: 100%;

    > .header {
      display: flex;
      padding: 0 4px;
      height: 32px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid @colorBorder;
      box-sizing: border-box;
      user-select: none;
      color: @colorText;
      background: @colorBgContainer;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;

      > .title {
        display: flex;
        width: 1px;
        flex: 1;
        align-items: center;
        height: 32px;

        > .main {
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          font-weight: bolder;
        }

        > .internal-slot {
          margin-left: 12px;
          width: 1px;
          flex: 1;
          overflow: auto;

          &::-webkit-scrollbar {
            width: 0;
            height: 0;
          }
        }
      }

      > .extra {
        margin-left: 12px;
      }
    }

    > .body {
      position: relative;
      width: 100%;
      height: calc(100% - 32px);
      background: @colorBgContainer;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;

      overflow: auto;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }

    &.float {
      position: fixed;
    }

    &.no-header {
      > .header {
        display: none;
      }
      > .body {
        height: 100%;
      }
    }
  }

  // side panel
  &-SidePanelContainer {
    position: relative;
    width: 42px;

    &.expanded {
      &::after {
        position: absolute;
        content: '';
        width: calc(100% - 6px);
        height: 100%;
        left: 0;
        top: 0;
        border-top: 1px solid @colorBorder;
        border-right: 1px solid @colorBorder;
        border-bottom: 1px solid @colorBorder;
        pointer-events: none;
        border-radius: 4px;
      }
    }

    &-side {
      position: absolute;
      left: 0;
      top: 0;
      width: 36px;
      height: 100%;
      margin: 0;
      padding: 0;

      color: @colorText;
      list-style: none;

      > li {
        margin-bottom: 4px;
        width: 36px;
        height: 36px;
        cursor: pointer;
        border-radius: 4px;
        overflow: hidden;

        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background-color: @colorBgElevated;
        }

        &.active {
          background-color: @colorPrimary;
        }
      }
    }

    &-main {
      margin: 0 6px 0 42px;
      height: 100%;

      color: @colorText;
      background: @colorBgContainer;
      border-radius: 4px;

      overflow: auto;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }

    &-resizer {
      position: absolute;
      right: 0;
      top: 0;
      width: 6px;
      height: 100%;

      cursor: col-resize;
    }
  }
}
