@import './ToolBarLayout.less';
@import './ScrollLayout.less';

@adhere-ui-flex-layout-grid-count: 24;

.adhere-ui-flex-layout-trblc {
  width: 100%;
  height: 100%;
  overflow: hidden;

  //&.adhere-ui-flex-layout-trblc-no-autofix {
  //  overflow: auto;
  //}

  > .adhere-ui-flex-layout {
    height: 100%;

    &.adhere-ui-flex-layout-horizontal {
      flex-wrap: nowrap;
    }
  }
}

.adhere-ui-flex-layout {
  display: flex;

  &.adhere-ui-flex-layout-trblc-auto-inner {
    height: 100%;

    &.adhere-ui-flex-layout-trblc-auto-inner-no-autofix {
      overflow: auto;
    }
  }

  // 横向
  &.adhere-ui-flex-layout-horizontal {
    flex-flow: row wrap;

    &.adhere-ui-flex-layout-horizontal-flex-layout {
      flex-wrap: nowrap;
    }

    > .adhere-ui-flex-layout-fixed {
      // 横向的栅格系统设置
      .span(@n, @i: 0) when (@i =< @n) {
        &.adhere-ui-flex-layout-fixed-col-@{i} {
          //flex-basis: (@i * 100% / @n);
          //max-width: (@i * 100% / @n);
          width: (@i * 100% / @n);
        }
        .span(@n, (@i + 1));
      }
      .span(@adhere-ui-flex-layout-grid-count);
    }

    > .adhere-ui-flex-layout-auto-auto-fixed {
      min-width: 0;
    }
  }

  // 纵向
  &.adhere-ui-flex-layout-vertical {
    flex-direction: column;

    > .adhere-ui-flex-layout-fixed {
      &.adhere-ui-flex-layout-fixed-gap {
        box-sizing: content-box !important;

        &:first-child {
          padding-top: 0 !important;
        }

        &:last-child {
          padding-bottom: 0 !important;
        }
      }
    }

    > .adhere-ui-flex-layout-auto {
      &.adhere-ui-flex-layout-auto-gap {
        box-sizing: content-box !important;

        &:first-child {
          padding-top: 0 !important;
        }

        &:last-child {
          padding-bottom: 0 !important;
        }
      }
    }

    > .adhere-ui-flex-layout-auto-auto-fixed {
      min-height: 0;
    }
  }

  > .adhere-ui-flex-layout-fixed {
    position: relative;
    flex-shrink: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    transition: all 0.2s;

    &.adhere-ui-flex-layout-fixed-fit {
      display: flex;

      > .adhere-ui-flex-layout {
        width: 100%;
      }

      > * {
        width: 100%;
      }
    }

    > .adhere-ui-flex-layout-fixed-trigger {
      position: absolute;
      z-index: 999;
      width: auto;
      color: var(--adhere-color-text-tertiary);
      font-size: 18px;

      &.adhere-ui-flex-layout-fixed-trigger-l,
      &.adhere-ui-flex-layout-fixed-trigger-r {
        top: 50%;
        transform: translateY(-50%);
      }
      &.adhere-ui-flex-layout-fixed-trigger-l {
        right: 0;
      }
      &.adhere-ui-flex-layout-fixed-trigger-r {
        left: 0;
      }

      &.adhere-ui-flex-layout-fixed-trigger-t,
      &.adhere-ui-flex-layout-fixed-trigger-b {
        left: 50%;
        transform: translateX(-50%);
      }
      &.adhere-ui-flex-layout-fixed-trigger-t {
        bottom: 0;
      }
      &.adhere-ui-flex-layout-fixed-trigger-b {
        top: 0;
      }

      &:hover {
        cursor: pointer;
      }
    }
  }

  > .adhere-ui-flex-layout-auto {
    flex: 1;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;

    &.adhere-ui-flex-layout-normal {
      flex: 0 1 auto;
    }

    &.adhere-ui-flex-layout-trblc-auto {
      &.adhere-ui-flex-layout-trblc-auto-no-autofix {
        overflow: inherit;
      }

      &.adhere-ui-flex-layout-auto-gap {
        overflow: hidden !important;
      }
    }

    &.adhere-ui-flex-layout-auto-fit {
      display: flex;

      > .adhere-ui-flex-layout {
        width: 100%;
      }

      > * {
        width: 100%;
      }
    }
  }
}