@import url('./variables.css');

.c-box {
  display: flex;
  flex-flow: row wrap;
  margin-left: calc(var(--grid-gap) / -2);
  margin-right: calc(var(--grid-gap) / -2);
}

.is-flex,
.c-spacer {
  flex: 1 1 0;
}

.is-fill-height {
  height: 100%;
}

.c-box__item {
  padding: calc(var(--grid-gap) * 0.5);
  flex: 1 1 auto;

  &.is-narrow {
    flex-grow: 0;
  }
}

.is-justify-start {
  justify-content: flex-start;
}

.is-justify-end {
  justify-content: flex-end;
}

.is-justify-center {
  justify-content: center;
}

.is-justify-space-between {
  justify-content: space-between;
}

.is-justify-space-around {
  justify-content: space-around;
}

.is-align-start {
  align-items: flex-start;
}

.is-align-end {
  align-items: flex-end;
}

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

.is-align-baseline {
  align-items: baseline;
}

.is-align-stretch {
  align-items: stretch;
}

.c-box.no-gap {
  margin-left: 0;
  margin-right: 0;

  & > * {
    padding-left: 0;
    padding-right: 0;
  }
}

/* stylelint-disable function-whitespace-after, at-rule-no-unknown */
@each $i in 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
  .has-offset-$i {
    margin-left: calc($i / 12 * 100)%;
  }

  .is-$i {
    flex: 0 1 auto;
    width: calc($i / 12 * 100)%;
  }
}

@each $i in flex, block, inline, inline-block, none {
  .is-$i {
    display: $i;
  }
}

.has-dir-row {
  flex-direction: row;
}

.has-dir-column {
  flex-direction: column;
}

/**
 * responsive
 */
@each $size in xs, sm, md, lg, xl {
  @media (--$(size)-up) {
    @each $i in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
      .is-$(i)-$(size) {
        flex: 0 1 auto;
        width: calc($i / 12 * 100)%;
      }

      .has-offset-$(i)-$(size) {
        margin-left: calc($i / 12 * 100)%;
      }
    }

    .is-auto-$(size) {
      flex: 0 1 auto;
      width: auto;
    }

    @each $d in block, inline-block, flex, inline, none {
      .is-$(d)-$(size) {
        display: $d;
      }
    }

    .has-dir-column-$(size) {
      flex-direction: column;
    }

    .has-dir-row-$(size) {
      flex-direction: row;
    }
  }

  @media (--$(size)-only) {
    @each $i in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
      .is-$(i)-$(size)-only {
        flex: 0 1 auto;
        width: calc($i / 12 * 100)%;
      }

      .has-offset-$(i)-$(size)-only {
        margin-left: calc($i / 12 * 100)%;
      }
    }

    .is-auto-$(size)-only {
      flex: 0 1 auto;
      width: auto;
    }

    @each $d in block, inline-block, flex, inline, none {
      .is-$(d)-$(size)-only {
        display: $d;
      }
    }

    .has-dir-column-$(size)-only {
      flex-direction: column;
    }

    .has-dir-row-$(size)-only {
      flex-direction: row;
    }
  }
}

/**
 * responsive listener
 */
.c-responsive-listener {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  visibility: hidden !important;
  height: 1px !important;
  padding: 0 !important;
  transition: width 1ms ease;
}

@media (--xs-only) {
  .c-responsive-listener {
    width: 0 !important;
  }
}

@media (--sm-only) {
  .c-responsive-listener {
    width: 1px !important;
  }
}

@media (--md-only) {
  .c-responsive-listener {
    width: 2px !important;
  }
}

@media (--lg-only) {
  .c-responsive-listener {
    width: 3px !important;
  }
}

@media (--xl-only) {
  .c-responsive-listener {
    width: 4px !important;
  }
}

.c-container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--container-margin);

  &.is-sm {
    max-width: var(--container-size-sm);
  }

  &.is-md {
    max-width: var(--container-size-md);
  }

  &.is-lg {
    max-width: var(--container-size-lg);
  }

  &.is-left {
    margin-left: 0;
  }

  &.is-right {
    margin-right: 0;
  }
}