@use "../variables" as *;

@mixin margin-auto($number: 0) {
  margin: #{$number * $typographic-leading + "px"} auto;
}

@mixin margin-left($number) {
  margin-left: #{$number * $typographic-leading + "px"};
}

@mixin margin-right($number) {
  margin-right: #{$number * $typographic-leading + "px"};
}

@mixin margin-top($number) {
  margin-top: #{$number * $typographic-leading + "px"};
}

@mixin margin-bottom($number) {
  margin-bottom: #{$number * $typographic-leading + "px"};
}

@mixin margin-equal($number) {
  margin: #{$number * $typographic-leading + "px"};
}

@mixin margin($top, $right, $bottom: null, $left: null) {
  @if not $left and not $bottom {
    margin:
      #{$top * $typographic-leading + "px"}
      #{$right * $typographic-leading + "px"};
  } @else if not $left or $left == $right {
    margin:
      #{$top * $typographic-leading + "px"}
      #{$right * $typographic-leading + "px"}
      #{$bottom * $typographic-leading + "px"};
  } @else {
    margin:
      #{$top * $typographic-leading + "px"}
      #{$right * $typographic-leading + "px"}
      #{$bottom * $typographic-leading + "px"}
      #{$left * $typographic-leading + "px"};
  }
}