@mixin box() {
  @if export($output, "box") {
    .boxes {
      width: 100%;
      display: flex;
      &--inline {
        display: flex-inline;
      }
      &--row {
        flex-direction: row;
      }
      &--column {
        flex-direction: column;
      }
      &--auto {
        .box {
          width: value(box-width, 100%);
          padding-bottom: value(box-height, 100%);
        }
      }
    }
    .box {
      width: value(box-width,#{value(space, 100%)});
      height: value(box-height,#{value(space, 100%)});
      border-radius: value(box-border-radius, value(border-radius));
      &--auto {
        width: auto;
        height: auto;
      }
    }
  }
}