@mixin utility-classes() {
  @if export($output, "utility.border") {
    [class*="border--"] {
      border-style: solid;
      border-color: currentColor;
    }
  }

  @if export($output, "utility.border.width") {
    // Borders
    @for $i from 1 through 10 {
      .border--#{$i} {
        border-width: ((space() / 20) * $i);
      }
    }
  }

  @if export($output, "utility.border.styles") {
    // Border style
    .border--solid {
      border-style: solid;
    }
    .border--dotted {
      border-style: dotted;
    }
    .border--dashed {
      border-style: dashed;
    }
  }

  @if export($output, "utility.border-radius") {
    @for $i from 1 through 10 {
      .border-radius--#{$i} {
        border-radius: ((space() / 5) * $i);
      }
    }
  }
  // Opacity
  @if export($output, "utility.opacity") {
    @for $i from 1 through 10 {
      .opacity--#{$i*10} {
        opacity: #{$i/10};
      }
    }
  }
  // Spacing

  @if export($output, "utility.space") {
    @for $i from 1 through 10 {
      .space--#{$i} {
        padding: ((space() / 5) * $i);
      }
    }
  }
  @if export($output, "utility.space-top") {
    // spacing top
    @for $i from 1 through 10 {
      .space-top--#{$i} {
        margin-top: ((space() / 5) * $i);
      }
    }
  }
  // Width

  @if export($output, "utility.width") {
    @for $i from 1 through 10 {
      .width--#{$i} {
        width: ((space() / 5) * $i);
      }
    }
  }
  @if export($output, "utility.height") {
    @for $i from 1 through 10 {
      .height--#{$i} {
        height: ((space() / 5) * $i);
      }
    }
  }

  @if export($output, "utility.gap") {
    // Gap
    @for $i from 1 through 10 {
      .gap--#{$i} {
        --gap: #{(space(0.5) * $i)};
        gap: value(gap);
      }
    }
  }

  @if export($output, "utility.font-size") {
    // Font-size
    @for $i from 1 through 10 {
      .font-size--#{$i} {
        font-size: (space(0.2) * $i);
      }
    }
  }

  @if export($output, "utility.font-styles") {
    // Font style
    .font--light {
      font-weight: 200;
      strong {
        font-weight: 600;
      }
    }
    .font--normal {
      font-weight: 400;
      strong {
        font-weight: 600;
      }
    }
    .font--bold {
      font-weight: 600;
    }
    .font--italic {
      font-style: italic;
    }
    .font--underline {
      text-decoration: underline;
    }
  }

  @if export($output, "utility.fixed") {
    .fixed {
      position: fixed;
      top: value(fixed-top, 0);
      left: value(fixed-left, 0);
    }
  }
  @if export($output, "utility.clipped") {
    .clipped {
      clip-path: inset(value(clip-path, 0 0 0 0));
    }
  }
  @if export($output, "utility.centered") {
    .centered {
      position: value(centered-position, absolute);
      left: value(centered-left, 50%);
      top: value(centered-top, 50%);
      transform: translate(
        value(centered-translate-x, -50%),
        value(centered-translate-y, -50%)
      );
    }
  }
}
@include utility-classes();