@use 'sass:math';

$utilities: ("padding": ("prefix": "p",
    "values": ("0": 0,
      "1": $base-padding,
      "2": $base-padding * 2,
      "3": $base-padding * 4,
      "4": $base-padding * 6,
      "5": $base-padding * 8),
  ),
  "padding-left": ("prefix": "pl",
    "values": ("0": 0,
      "1": $base-padding,
      "2": $base-padding * 2,
      "3": $base-padding * 4,
      "4": $base-padding * 6,
      "5": $base-padding * 8),
  ),
  "padding-right": ("prefix": "pr",
    "values": ("0": 0,
      "1": $base-padding,
      "2": $base-padding * 2,
      "3": $base-padding * 4,
      "4": $base-padding * 6,
      "5": $base-padding * 8),
  ),
  "padding-top": ("prefix": "pt",
    "values": ("0": 0,
      "1": $base-padding,
      "2": $base-padding * 2,
      "3": $base-padding * 4,
      "4": $base-padding * 6,
      "5": $base-padding * 8),
  ),
  "padding-bottom": ("prefix": "pb",
    "values": ("0": 0,
      "1": $base-padding,
      "2": $base-padding * 2,
      "3": $base-padding * 4,
      "4": $base-padding * 6,
      "5": $base-padding * 8),
  ),
  "margin": ("prefix": "m",
    "values": ("0": 0,
      "1": $base-margin,
      "2": $base-margin * 2,
      "3": $base-margin * 4,
      "4": $base-margin * 6,
      "5": $base-margin * 8),
  ),
  "margin-left": ("prefix": "ml",
    "values": ("0": 0,
      "1": $base-margin,
      "2": $base-margin * 2,
      "3": $base-margin * 4,
      "4": $base-margin * 6,
      "5": $base-margin * 8),
  ),
  "margin-right": ("prefix": "mr",
    "values": ("0": 0,
      "1": $base-margin,
      "2": $base-margin * 2,
      "3": $base-margin * 4,
      "4": $base-margin * 6,
      "5": $base-margin * 8),
  ),
  "margin-top": ("prefix": "mt",
    "values": ("0": 0,
      "1": $base-margin,
      "2": $base-margin * 2,
      "3": $base-margin * 4,
      "4": $base-margin * 6,
      "5": $base-margin * 8),
  ),
  "margin-bottom": ("prefix": "mb",
    "values": ("0": 0,
      "1": $base-margin,
      "2": $base-margin * 2,
      "3": $base-margin * 4,
      "4": $base-margin * 6,
      "5": $base-margin * 8),
  ),
  "opacity": ("prefix": "o",
    "values": ("10": 0.1,
      "20": 0.2,
      "30": 0.3,
      "40": 0.4,
      "50": 0.5,
      "60": 0.6,
      "70": 0.7,
      "80": 0.8,
      "90": 0.9,
      "100": 1,
    ),
  ),
  "width": ("prefix": "w",
    "values": ("5": 5%,
      "10": 10%,
      "15": 15%,
      "20": 20%,
      "25": 25%,
      "30": 30%,
      "35": 35%,
      "40": 40%,
      "45": 45%,
      "50": 50%,
      "55": 55%,
      "60": 60%,
      "65": 65%,
      "70": 70%,
      "75": 75%,
      "80": 80%,
      "85": 85%,
      "90": 90%,
      "95": 95%,
      "100": 100%,
    ),
  ),"height": ("prefix": "h",
  "values": ("5": 5%,
    "10": 10%,
    "15": 15%,
    "20": 20%,
    "25": 25%,
    "30": 30%,
    "35": 35%,
    "40": 40%,
    "45": 45%,
    "50": 50%,
    "55": 55%,
    "60": 60%,
    "65": 65%,
    "70": 70%,
    "75": 75%,
    "80": 80%,
    "85": 85%,
    "90": 90%,
    "95": 95%,
    "100": 100%,
  ),
),
  "border-radius": ("prefix": "br",
    "values": ("default": $base-border-radius,
      "none": 0,
      "xs": math.div($base-border-radius, 4),
      "sm": math.div($base-border-radius, 2),
      "lg": $base-border-radius * 2,
      "full": 50%,
    )),
  "display": ("prefix": "display",
    "values": ("n": none,
      "b": block,
      "f": flex,
      "i": inline,
      "i-b": inline-block)),
  "font-size": ("prefix": "font",
    "values": ("sm": $font-size-sm,
      "md": $base-font-size,
      "lg": $font-size-lg,
      "xl": $font-size-xl,
      "xxl": $font-size-xxl)),
  "position": ("prefix": 'position',
    "values": ("absolute": absolute,
      "sticky": sticky,
      "fixed": fixed,
      "static": static,
      "relative": relative,
      "inherit": inherit)),
  "overflow": ("prefix": 'overflow',
    "values": ("visible": visible,
      "hidden": hidden,
      "clip": clip,
      "scroll": scroll,
      "auto": auto,
      "initial": initial,
      "inherit": inherit)),
  "overflow-y": ("prefix": 'overflow-y',
    "values": ("visible": visible,
      "hidden": hidden,
      "clip": clip,
      "scroll": scroll,
      "auto": auto,
      "initial": initial,
      "inherit": inherit)),
  "overflow-x": ("prefix": 'overflow-x',
    "values": ("visible": visible,
      "hidden": hidden,
      "clip": clip,
      "scroll": scroll,
      "auto": auto,
      "initial": initial,
      "inherit": inherit)));

@each $property,
$map in $utilities {
  $prefix: map-get($map, "prefix");
  $values: map-get($map, "values");

  @each $key,
  $val in $values {
    @if($key=="default") {
      .#{$prefix} {
        #{$property}: $val;
      }
    }

    @else {
      .#{$prefix}-#{$key} {
        #{$property}: $val;
      }
    }
  }
}

//  .class {
//    @include center(middle);
//  }
@mixin center($position) {
  position: absolute;

  @if $position=='vertical' {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  @else if $position=='horizontal' {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
  }

  @else if $position=='middle' {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

//  .class {
//    @include ratio(16,9);
//  }
@mixin ratio($width, $height, $pseudo: false) {
  $padding: unquote(($height / $width) * 100 + '%');

  @if $pseudo {
    &:before {
      @include pseudo($pos: relative);
      width: 100%;
      padding-top: $padding;
    }
  }

  @else {
    padding-top: $padding;
  }
}

@mixin pseudo($width: 100%,
  $height: 100%,
  $display: inline-block,
  $pos: absolute,
  $content: ""

) {
  content: $content;
  display: $display;
  position: $pos;
  @include box($width, $height);
}

//  @include font-face(Roboto, "./assets/Roboto", normal, normal);
@mixin font-face($font-name, $path, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($path+".eot");
    src: url($path+".eot?#iefix") format("embedded-opentype"),
    url($path+".woff") format("woff"),
    url($path+".ttf") format("truetype"),
    url($path+".svg##{$font-name}") format("svg");
    font-weight: $weight;
    font-style: $style;
  }
}