@import './scss/variable.scss';
@import './scss/mixin.scss';
#{$wcontainer-prefix} {
  background: $wcontainer-bg-color;
  display: flex;
  flex-direction: column;
  border-radius: $wcontainer-corner-radius;
  padding: $wcontainer-padding;
  box-shadow: $wcontainer-shadow;

  // 移动端适配
  &#{$wcontainer-prefix}-mobile {
    padding: $wcontainer-mobile-padding;

    #{$wcontainer-prefix}-title {
      padding: $wcontainer-mobile-padding;
    }
  }

  #{$wcontainer-prefix}-title {
    padding-bottom: $wcontainer-padding;
    font-size: $wcontainer-title-font-size;
    line-height: 1;
    color: $wcontainer-title-color;
    //border-bottom: 1px solid $wcontainer-split-line;

    &#{$wcontainer-prefix}-title-border {
      position: relative;
      padding-left: 0.75em;

      &:before {
        content: "";
        position: absolute;
        // fix: 兼容移动端，不设置top，直接和文字顶部对齐
        //top: $wcontainer-padding;
        left: 0;

        // 适配字体大小，直接使用em
        width: 0.25em;
        height: 1em;
        background: $wcontainer-title-border-color;
        border-radius: 0.125em;
      }
    }

    //#{$wcontainer-prefix}-title-border {
    //  display: inline-block;
    //
    //  width: $wcontainer-cross-size-1;
    //  height: $s4;
    //  margin-right: $s2;
    //  vertical-align: -2px;
    //  background: $widgets-color-blue;
    //  border-radius: 10px;
    //}

    >#{$wcontainer-prefix}-operation {
      float: right;

      font-size: $wcontainer-extra-font-size;

      a {
        color: $wcontainer-extra-color;

        &:hover {
          color: $wcontainer-extra-color-hover;
        }
      }
    }
  }

  #{$wcontainer-prefix}-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &#{$wcontainer-prefix}-cross {
      >#{$wcontainer-prefix}-multi-row-container {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        //padding: 0 $s5;
        #{$wcontainer-prefix}-row {
          flex: 1; //padding-top: $s2;
          //padding-bottom: $s2;
          border-bottom: 1px solid $wcontainer-split-line;
          &:last-child {
            border-bottom: none;
          }
          #{$wcontainer-prefix}-col {
            margin-right: $wcontainer-cross-size-1;
            margin-left: $wcontainer-cross-size-1;
            padding-left: $wcontainer-cross-size-2;
            border-left: 1px solid $wcontainer-split-line;
            &:first-child {
              border-left: none;
              margin-left: 0;
              padding-left: 0;
            }
          }
        }
      }
    }
    &#{$wcontainer-prefix}-main-one-chart {
      // 修复图表无法缩小的问题
      // 设置 overflow 以建立一个新的 BFC，让里层图表不会撑开外层
      overflow: hidden;
    }
    >#{$wcontainer-prefix}-row {
      padding: 0;
      >#{$wcontainer-prefix}-col {
        padding: 0;
      }
    }
    &.center {
      text-align: center;
    }

    &#{$wcontainer-prefix}-main-critical-error {
      align-items: center;
      overflow: auto;
      color: $wcontainer-error-color;

      pre {
        margin: 0;
        padding: 0;
        font-size: 1em;
      }
    }
  }
  #{$wcontainer-prefix}-divider {
    width: 1px;
    height: 30px;
    background: $wcontainer-split-line;
  }

  /////////////////////////////////////////////////////////////

  // 行容器
  #{$wcontainer-prefix}-row {
    @include box-sizing;
    @include display-flex();
    @include breakpoint-row-space();

    //// 固定宽度布局
    //&#{$wcontainer-prefix}-row-fixed {
    //  margin-left: auto;
    //  margin-right: auto;
    //  @include breakpoint-row-width();
    //}
    //
    //// 流式布局
    //&#{$wcontainer-prefix}-row-fluid {
    //  margin-left: auto;
    //  margin-right: auto;
    //  @include breakpoint-row-max-width();
    //}
    //
    //// 单行模式，多列溢出折行
    //&#{$wcontainer-prefix}-row-wrap {
    //  @include flex-wrap(wrap);
    //}
    //
    //// 单行模式，多列溢出不折行
    //&#{$wcontainer-prefix}-row-no-wrap {
    //  @include flex-wrap(nowrap);
    //}

    // 所有列之间均没有留白
    &#{$wcontainer-prefix}-row-no-padding {
      padding: 0;

      > #{$wcontainer-prefix}-col {
        padding: 0;
      }
    }

    // 通栏
    &#{$wcontainer-prefix}-row-across {
      padding: 0;
      > :first-child {
        padding-left: 0;
      }
      > :last-child {
        padding-right: 0;
      }
    }

    //&#{$wcontainer-prefix}-row-fixed-xxs {
    //  width: $grid-xxs;
    //}
    //&#{$wcontainer-prefix}-row-fixed-xs {
    //  width: $grid-xs;
    //}
    //&#{$wcontainer-prefix}-row-fixed-s {
    //  width: $grid-s;
    //}
    //&#{$wcontainer-prefix}-row-fixed-m {
    //  width: $grid-m;
    //}
    //&#{$wcontainer-prefix}-row-fixed-l {
    //  width: $grid-l;
    //}
    //&#{$wcontainer-prefix}-row-fixed-xl {
    //  width: $grid-xl;
    //}

    @include justify();
  }

  //// IE pack
  //#{$wcontainer-prefix}-row-ie9 {
  //  @include display-ie();
  //
  //  #{$wcontainer-prefix}-col {
  //    @include display-col-ie();
  //  }
  //}

  // 列容器，列两侧间距为栅格槽的宽度
  #{$wcontainer-prefix}-col {
    @include flex(1);
    display: inline-block;
    padding: 0 ($grid-gutter * 0.5);
    width: auto;

    & > #{$wcontainer-prefix}-row {
      padding: 0;
    }
  }


  @include make-columns();
  //@include make-5columns();
  @include make-columns-fixed();

  //@include make-offset();
  //@include make-offset-fixed();

  // 行内(所有)列的垂直对齐方式
  #{$wcontainer-prefix}-row-align-top {
    @include align-items(flex-start);
  }
  #{$wcontainer-prefix}-row-align-bottom {
    @include align-items(flex-end);
  }
  #{$wcontainer-prefix}-row-align-center {
    @include align-items(center);
  }
  #{$wcontainer-prefix}-row-align-baseline {
    @include align-items(baseline);
  }
  #{$wcontainer-prefix}-row-align-stretch {
    @include align-items(stretch);
    #{$wcontainer-prefix}-col {
      display: flex;
    }
  }
}