@use 'sass:math';
@use 'sass:string';
@use 'sass:map';
@use 'sass:list';
@use 'config' as *;


@function getListFirst($list) {
  @return list.nth($list, 1);
}

@function getListLast($list) {
  $max: list.length($list);
  @return list.nth($list, $max);
}


@mixin makeBreakpoints() {
  @each $breakpoint, $pixel in $breakpoints {
    @media screen and (min-width: #{$pixel}) {
      @if $flexiplier != 'fives' {
        [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:25"] {
          flex: 0 0 25%;
          max-width: 25%;
        }
      }

      [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:33"] {
        flex: 0 0 33.33%;
        max-width: 33.33%;
      }

      [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:66"] {
        flex: 0 0 66.66%;
        max-width: 66.66%;
      }

      @if $flexiplier != 'fives' {
        [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:75"] {
          flex: 0 0 75%;
          max-width: 75%;
        }
      }

      [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:content"] {
        flex: 0 0 auto;
      }

      @if $flexiplier == 'fives' {
        @for $i from 1 through 20 {
          $size: $i*5;
          $percent: $size + '%';

          [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:#{$size}"] {
            flex: 0 0 string.unquote($percent);
            max-width: string.unquote($percent);
          }
        }
      }

      @if $flexiplier == 'tens' {
        @for $i from 1 through 10 {
          $size: $i*10;
          $percent: $size + '%';

          [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:#{$size}"] {
            flex: 0 0 string.unquote($percent);
            max-width: string.unquote($percent);
          }
        }
      }

      @if $flexiplier == 'twenties' {
        @for $i from 1 through 5 {
          $size: $i*20;
          $percent: $size + '%';

          [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:#{$size}"] {
            flex: 0 0 string.unquote($percent);
            max-width: string.unquote($percent);
          }
        }
      }
    } // media query
  }
}

@mixin makeGutters() {
  [kemet-gutters] {
    margin-right: -(map.get($gutters, md));
  }

  [kemet-layout='flexlist'][kemet-gutters] {
    gap: map.get($gutters, md);
  }

  [kemet-gutters] > * {
    padding-right: map.get($gutters, md);
  }

  [kemet-layout='flexgrid'][kemet-gutters] > * {
    margin-bottom: map.get($gutters, md);
  }

  [kemet-layout='flexcolumn'][kemet-gutters] > :not(:first-child) {
    margin-top: map.get($gutters, md);
  }

  @media only screen and (max-width: $stackpoint) {
    [kemet-layout='flexrow'][kemet-gutters][autostack] > * {
      margin-bottom: map.get($gutters, md);
    }
  }

  @each $attsvalue, $value in $gutters {
    $gutterselector: '[kemet-gutters*="#{$attsvalue}"]';
    // @debug $gutterselector;

    #{$gutterselector} {
      margin-right: -($value);
    }

    [kemet-layout="flexlist"]#{$gutterselector} {
      gap: $value;
    }

    #{$gutterselector} > * {
      padding-right: $value;
    }

    [kemet-layout="flexgrid"]#{$gutterselector} > * {
      margin-bottom: $value;
    }

    [kemet-layout="flexcolumn"]#{$gutterselector} > :not(:first-child) {
      margin-top: $value;
    }

    @media only screen and (max-width: $stackpoint) {
      [kemet-layout="flexrow"]#{$gutterselector}[autostack] > * {
        margin-bottom: $value;
      }
    }
  }

  @if $makeresponsivegutters {
    @each $breakpoint, $pixel in $breakpoints {
      @media screen and (min-width: #{$pixel}) {
        @each $attsvalue, $value in $gutters {
          $gutterselector: '[kemet-gutters*="#{$breakpoint}:#{$attsvalue}"]';
          // @debug $gutterselector;

          #{$gutterselector} {
            margin-right: -($value);
          }

          [kemet-layout="flexlist"]#{$gutterselector} {
            gap: $value;
          }

          #{$gutterselector} > * {
            padding-right: $value;
          }

          [kemet-layout="flexgrid"]#{$gutterselector} > * {
            margin-bottom: $value;
          }

          [kemet-layout="flexcolumn"]#{$gutterselector} > :not(:first-child) {
            margin-top: $value;
          }

          @media only screen and (max-width: $stackpoint) {
            [kemet-layout="flexrow"]#{$gutterselector}[autostack] > * {
              margin-bottom: $value;
            }
          }
        }
      }
    }
  }
}

@mixin makeTypeSizers() {
  @each $key, $value in $typesizers {
    [kemet-type-size*="#{$key}"] {
      font-size: $value;
      margin: 0;
    }
  }

  @each $breakpoint, $pixel in $breakpoints {
    @media screen and (min-width: #{$pixel}) {
      @each $key, $value in $typesizers {
        [kemet-type-size*="#{$breakpoint}:#{$key}"] {
          font-size: $value;
          margin: 0;
        }
      }
    }
  }
}

@mixin makeOrder() {
  @each $breakpoint, $pixel in $breakpoints {
    @media screen and (min-width: #{$pixel}) {
      [kemet-order*="#{$breakpoint}:none"] {
        order: 0;
      }

      @for $i from 1 through $order {
        [kemet-order*="#{$breakpoint}:minus-#{$i}"] {
          order: -#{$i};
        }
      }

      @for $i from 1 through $order {
        [kemet-order*="#{$breakpoint}:plus-#{$i}"] {
          order: #{$i};
        }
      }
    }
  }
}

@mixin makeVisibility() {
  @each $breakpoint, $range in $breakranges {
    $min: getListFirst($range);
    $max: getListLast($range);

    @media screen and (min-width: $min) {
      [kemet-show="#{$breakpoint}:up"] {
        display: inherit !important;
      }

      table[kemet-show="#{$breakpoint}:up"] {
        display: table !important;
      }

      [kemet-hide="#{$breakpoint}:up"] {
        display: none !important;
      }
    }

    @media screen and (max-width: $max) {
      [kemet-show="#{$breakpoint}:down"] {
        display: inherit !important;
      }

      table[kemet-show="#{$breakpoint}:down"] {
        display: table !important;
      }

      [kemet-hide="#{$breakpoint}:down"] {
        display: none !important;
      }
    }

    @media screen and (min-width: $min) and (max-width: $max) {
      [kemet-show="#{$breakpoint}"] {
        display: inherit !important;
      }

      table[kemet-show="#{$breakpoint}"] {
        display: table !important;
      }

      [kemet-hide="#{$breakpoint}"] {
        display: none !important;
      }
    }
  } // @each
}

@mixin makeFlexgridBasis() {
  @each $breakpoint, $pixel in $breakpoints {
    @media screen and (min-width: #{$pixel}) {
      @for $i from 1 through $flexgridcolumns {
        $base: math.div(100, $i);

        [kemet-basis*="#{$breakpoint}:#{$i}-columns"] > * {
          flex: 0 0 string.unquote($base+'%');
          max-width: string.unquote($base+'%');
        }
      }
    } // media query
  }
}

@mixin makeSpacers() {
  $sides: 'top', 'right', 'bottom', 'left';

  @each $spacer, $value in $spacers {
    [kemet-margin*="#{$spacer}"] {
      margin: $value;
    }

    [kemet-padding*="#{$spacer}"] {
      padding: $value;
    }

    @each $side in $sides {
      [kemet-margin-#{$side}*="#{$spacer}"] {
        margin-#{$side}: $value;
      }

      [kemet-padding-#{$side}*="#{$spacer}"] {
        padding-#{$side}: $value;
      }
    }
  }

  @each $breakpoint, $pixel in $breakpoints {
    @media screen and (min-width: #{$pixel}) {
      @each $spacer, $value in $spacers {
        [kemet-margin*="#{$breakpoint}:#{$spacer}"] {
          margin: $value;
        }

        [kemet-padding*="#{$breakpoint}:#{$spacer}"] {
          padding: $value;
        }

        @each $side in $sides {
          [kemet-margin-#{$side}*="#{$breakpoint}:#{$spacer}"] {
            margin-#{$side}: $value;
          }

          [kemet-padding-#{$side}*="#{$breakpoint}:#{$spacer}"] {
            padding-#{$side}: $value;
          }
        }
      }
    }
  }
}

@mixin makeTypeAlign {
  [kemet-type-align='left'] {
    text-align: left;
  }

  [kemet-type-align='right'] {
    text-align: right;
  }

  [kemet-type-align='center'] {
    text-align: center;
  }

  @each $breakpoint, $pixel in $breakpoints {
    @media screen and (min-width: #{$pixel}) {
      [kemet-type-align*='#{$breakpoint}:left'] {
        text-align: left;
      }

      [kemet-type-align*='#{$breakpoint}:right'] {
        text-align: right;
      }

      [kemet-type-align*='#{$breakpoint}:center'] {
        text-align: center;
      }
    }
  }
}

@mixin makeColors {
  @each $color, $value in $colors {
    $name: '' + $color;

    [kemet-color="#{$name}"] {
      color: rgb(var(--kemet-color-#{'' + $color}));
    }

    [kemet-background-color="#{$name}"] {
      background-color: rgb(var(--kemet-color-#{'' + $color}));
    }
  }

  @each $color, $value in $themecolors {
    $name: '' + $color;

    [kemet-color="#{$name}"] {
      color: rgb(var(--kemet-color-#{'' + $color}));
    }

    [kemet-background-color="#{$name}"] {
      background-color: rgb(var(--kemet-color-#{'' + $color}));
    }
  }

  [kemet-color='auto'] {
    color: rgb(var(--kemet-color-foreground));
  }

  [kemet-background-color='auto'] {
    background-color: rgb(var(--kemet-color-background));
  }
}

@mixin makeElevation {
  @each $layer, $value in $elevation {
    [kemet-elevation="#{$layer}"] {
      box-shadow: var(--kemet-elevation-#{'' + $layer});
    }
  }
}

@mixin makeElevationDark {
  @each $layer, $value in $elevation {
    --kemet-elevation-#{"" + $layer}: none;
  }
}

@mixin makeBorders {
  $sides: 'top', 'right', 'bottom', 'left';
  $styles: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;

  @each $color, $value in $colors {
    $name: '' + $color;

    [kemet-border*="#{$name}"] {
      border-color: RGB(string.unquote($value));
    }
  }

  @each $color, $value in $themecolors {
    $name: '' + $color;

    [kemet-border*="#{$name}"] {
      border-color: RGB(string.unquote($value));
    }
  }

  [kemet-border*='auto'] {
    border-color: rgb(var(--kemet-color-foreground));
  }

  @each $width, $value in $borderwidths {
    [kemet-border*="all-#{$width}"] {
      border-width: $value;
    }
  }

  @each $width, $value in $borderwidths {
    [kemet-border*="horizontal-#{$width}"] {
      border-top-width: $value;
      border-bottom-width: $value;
    }
  }

  @each $width, $value in $borderwidths {
    [kemet-border*="vertical-#{$width}"] {
      border-left-width: $value;
      border-right-width: $value;
    }
  }

  @each $width, $value in $borderwidths {
    @each $side in $sides {
      [kemet-border*="#{$side}-#{$width}"] {
        border-#{$side}-width: $value;
      }
    }
  }

  @each $style in $styles {
    [kemet-border*="all"][kemet-border*="#{$style}"] {
      border-style: $style;
    }

    [kemet-border*="horizontal"][kemet-border*="#{$style}"] {
      border-style: none;
      border-top-style: $style;
      border-bottom-style: $style;
    }

    [kemet-border*="vertical"][kemet-border*="#{$style}"] {
      border-style: none;
      border-left-style: $style;
      border-right-style: $style;
    }

    @each $side in $sides {
      [kemet-border*="#{$side}"][kemet-border*="#{$style}"] {
        border-style: none;
        border-#{$side}-style: $style;
      }
    }
  }
}

@mixin makeBorderRadiuses {
  @each $size, $value in $borderradiuses {
    [kemet-border-radius="#{$size}"] {
      border-radius: $value;
    }
  }
}

@mixin makeRoot {
  :root {
    // handle colors
    @each $color, $value in $colors {
      --kemet-color-#{"" + $color}: #{$value};
    }

    @each $color, $value in $themecolors {
      --kemet-color-#{"" + $color}: #{$value};
    }

    // handle border radiuses
    @each $size, $value in $borderradiuses {
      --kemet-border-radius-#{"" + $size}: #{$value};
    }

    // handle elevation
    @each $layer, $value in $elevation {
      --kemet-elevation-#{"" + $layer}: #{$value};
    }

    // handle spacers
    @each $size, $value in $spacers {
      --kemet-spacer-#{"" + $size}: #{$value};
    }

    // component specific
    --kemet-upload-margin: 1rem;
  }
}