$mu-screens: (
  sm: 600px,
  md: 720px
) !global;

$mu-default-spacings: (
  0: 0px,
  px: 1px,
  1: 4px,
  2: 8px,
  3: 12px,
  4: 16px,
  5: 20px,
  6: 24px,
  8: 32px,
  10: 40px,
  12: 48px,
  16: 64px,
  20: 80px,
  24: 96px,
  32: 128px,
  40: 160px,
  48: 192px,
  56: 224px,
  64: 256px
) !global;

$mu-default-theme: (
  black: #000000,
  fuchsia-blue: #845ec2,
  hopbush: #d65db1,
  tickle-me-pink: #ff6f91,
  atomic-tangerine: #ff9671,
  golden-tainoi: #ffc75f,
  festival: #f9f871,
  white: #ffffff
) !global;

$mu-default-shifts: (
  xxs: 75ms,
  xs: 100ms,
  sm: 150ms,
  md: 200ms,
  lg: 250ms,
  xl: 300ms,
  xxl: 500ms
) !global;

$mu-default-easings: (
  standart: cubic-bezier(0.4, 0, 0.2, 1),
  decelerate: cubic-bezier(0, 0, 0.2, 1),
  accelerate: cubic-bezier(0.4, 0, 1, 1)
) !global;

$mu-utilities: () !global;
$mu-hover-utilities: () !global;
$mu-focus-utilities: () !global;
$mu-active-utilities: () !global;
$mu-group-hover-utilities: () !global;
$mu-group-active-utilities: () !global;
$mu-focus-within-utilities: () !global;
$mu-responsive-utilities: () !global;

@mixin mu-parse-ruleset($ruleset) {
  @each $key, $value in $ruleset {
    @if $key == before {
      &::before {
        @each $key-before, $value-before in map-get($ruleset, before) {
          #{$key-before}: #{$value-before};
        }
      }
    } @else if $key == after {
      &::after {
        @each $key-after, $value-after in map-get($ruleset, after) {
          #{$key-after}: #{$value-after};
        }
      }
    } @else {
      #{$key}: #{$value};
    }
  }
}

@function mu-add-ruleset($map, $name, $ruleset) {
  $map: map-merge(
    $map,
    (
      $name: $ruleset
    )
  );
  @return $map;
}

@mixin mu-add-pseudo-variants($name, $ruleset, $variants: (), $screens: ()) {
  @each $variant in $variants {
    $variant-name: "";
    $variant-map: ();
    @if $variant == hover {
      $variant-name: "hover\\:#{$name}:hover";
      $mu-hover-utilities: mu-add-ruleset($mu-hover-utilities, $variant-name, $ruleset) !global;
    }
    @if $variant == focus {
      $variant-name: "focus\\:#{$name}:focus";
      $mu-focus-utilities: mu-add-ruleset($mu-focus-utilities, $variant-name, $ruleset) !global;
    }
    @if $variant == active {
      $variant-name: "active\\:#{$name}:active";
      $mu-active-utilities: mu-add-ruleset($mu-active-utilities, $variant-name, $ruleset) !global;
    }
    @if $variant == group-hover {
      $variant-name: "group:hover .group-hover\\:#{$name}";
      $mu-group-hover-utilities: mu-add-ruleset($mu-group-hover-utilities, $variant-name, $ruleset) !global;
    }
    @if $variant == group-active {
      $variant-name: "group:active .group-active\\:#{$name}";
      $mu-group-active-utilities: mu-add-ruleset($mu-group-active-utilities, $variant-name, $ruleset) !global;
    }
    @if $variant == focus-within {
      $variant-name: "focus-within\\:#{$name}";
      $mu-focus-within-utilities: mu-add-ruleset($mu-focus-within-utilities, $variant-name, $ruleset) !global;
    }
    @if length($screens) > 0 {
      @include mu-add-responsive-variants($variant-name, $ruleset, $screens);
    }
  }
}

@mixin mu-add-responsive-variants($name, $ruleset, $screens: ()) {
  @each $screen in $screens {
    $size: map-get($mu-screens, $screen);
    @if $size != null {
      @if map-has-key($mu-responsive-utilities, $screen) {
      } @else {
        $mu-responsive-utilities: map-merge(
          $mu-responsive-utilities,
          (
            $screen: ()
          )
        ) !global;
      }
      $screen-map: map-get($mu-responsive-utilities, $screen);
      $screen-map: map-merge(
        $screen-map,
        (
          "#{$screen}\\:#{$name}": $ruleset
        )
      );
      $mu-responsive-utilities: map-merge(
        $mu-responsive-utilities,
        (
          $screen: $screen-map
        )
      ) !global;
    }
  }
}

@mixin mu-add-utility($name, $ruleset) {
  $mu-utilities: map-merge(
    $mu-utilities,
    (
      $name: $ruleset
    )
  ) !global;
}

@mixin mu-create-utility($name, $ruleset, $variants: (), $screens: ()) {
  @include mu-add-utility($name, $ruleset);
  @include mu-add-responsive-variants($name, $ruleset, $screens);
  @include mu-add-pseudo-variants($name, $ruleset, $variants, $screens);
}

@mixin mu-generate-utility($name, $ruleset) {
  .#{$name} {
    @include mu-parse-ruleset($ruleset);
  }
}

@mixin mu-init() {
  @each $name, $ruleset in $mu-utilities {
    @include mu-generate-utility($name, $ruleset);
  }
  @each $name, $ruleset in $mu-hover-utilities {
    @include mu-generate-utility($name, $ruleset);
  }
  @each $name, $ruleset in $mu-focus-utilities {
    @include mu-generate-utility($name, $ruleset);
  }
  @each $name, $ruleset in $mu-active-utilities {
    @include mu-generate-utility($name, $ruleset);
  }
  @each $name, $ruleset in $mu-group-hover-utilities {
    @include mu-generate-utility($name, $ruleset);
  }
  @each $name, $ruleset in $mu-group-active-utilities {
    @include mu-generate-utility($name, $ruleset);
  }
  @each $name, $ruleset in $mu-focus-within-utilities {
    @include mu-generate-utility($name, $ruleset);
  }
  @each $screen, $size in $mu-screens {
    $utils: map-get($mu-responsive-utilities, $screen);
    @if $utils != null {
      @media (min-width: $size) {
        @each $name, $ruleset in $utils {
          @include mu-generate-utility($name, $ruleset);
        }
      }
    }
  }
}