@import "../common/variables";
@import '../mixins.less';

.@{css-prefix} {
  &-col {
    position: relative;
    min-width: 0;

    display: flex;
    flex: 1;

    &.valign-top {
      align-items: flex-start;
    }

    &.valign-bottom {
      align-items: flex-end;
    }

    &.valign-middle {
      align-items: center;
    }

    &.align-left {
      justify-content: flex-start;
    }

    &.align-center {
      justify-content: center;
    }

    &.align-right {
      justify-content: flex-end;
    }

    .@{css-prefix}-col-content {
      height: 100%;
      min-width: 0;
      flex-direction: column;

      width: 100%;
      display: flex;

      &.flex-row {
        flex-direction: row;
        justify-content: center;
      }

      &.flex-column {
        flex-direction: column;
      }

      &.valign-top {
        justify-content: flex-start;
      }

      &.valign-bottom {
        justify-content: flex-end;
      }

      &.valign-middle {
        justify-content: center;
      }

      &.align-left {
        align-items: flex-start;
      }

      &.align-center {
        align-items: center;
      }

      &.align-right {
        align-items: flex-end;
      }

      &.tap-effect:active {
        background-color: rgba(231, 231, 231, 0.5);
      }
    }
  }

  &-col-border-left {
    &:before {
      .setLeftLine();
    }
  }

  &-col-border-right {
    &:after {
      .setRightLine();
    }
  }

  &-col-align-center {
    text-align: center;
  }

  &-col-align-right {
    text-align: right;
  }
}
.loop(@n) when(@n > 0) {
  .@{css-prefix}-col-@{n} {
    float: left;
    height: 100%;
    width: 100%/12*@n;
    flex: 0 0 100%/12*@n;
  }

  .loop((@n - 1))
}

.loop(12);