// Math module for division
@use "sass:math";

@import '../atoms-settings';
@import "spacing";

@include define-spacing-variables();

$sample-dimension: 2rem;
$sample-border-width: 3px;

.sample-spacing {
  border-color: #000000;
  display: flex;

  &--vertical {
    flex-direction: row;
    & > div {
      border-top: $sample-border-width solid;
      border-right: none;
      border-bottom: $sample-border-width solid;
      border-left: none;
      width: $sample-dimension;
      &::before {
        text-align: center;
        display: block;
        padding-left: 0 !important;
      }
      &::after {
        content: "" !important;
      }
    }
  }

  &--horizontal {
    flex-direction: column;
    & > div {
      border-top: none;
      border-right: $sample-border-width solid;
      border-bottom: none;
      border-left: $sample-border-width solid;
      height: $sample-dimension;

      &::before,
      &::after {
        line-height: $sample-dimension;
      }

      &::before {
        padding-right: .6rem;
      }
    }
  }

  @for $i from 1 through $spacing-num {
    $n: $i -  $spacing-offset-default-size;

    $name: null;
    @if $n < 0 {
      $name: "m" + abs($n);
    }
    @else if $n == 0 {
      $name: $n;
    }
    @else {
      $name: "p" + $n;;
    }

    &--#{$name} {
      height: calc(var(--spacing-#{$name}) + #{2 * $sample-border-width});
      width: calc(var(--spacing-#{$name}) + #{2 * $sample-border-width});

      &::before {
        content: "#{$n}";
        padding-left: calc(var(--spacing-#{$name}) + #{$sample-border-width} + .3rem);
        padding-top: calc(var(--spacing-#{$name}) + #{$sample-border-width} + .3rem);
      }
    }
  }

  &--0 {
    border-bottom-color: red !important;
    border-right-color: red !important;
    position: relative;

    &::before {
      color: red !important;
    }
  }
}

@each $scale-name, $scale in $spacings {
  .view--#{$scale-name} {
    @each $index, $value in $scale {
      $name: null;
      @if $index < 0 {
        $name: "m" + abs($index);
      }
      @else if $index == 0 {
        $name: $index;
      }
      @else {
        $name: "p" + $index;;
      }

      & .sample-spacing--#{$name}{
        white-space: nowrap;
        &::before,
        &::after {
          font-size: .8rem;
          color: #b2b2b2;
          font-family: "Courier New";
        }

        &::after {
          $value: math.div(round(1000 * $value), 1000);
          $value-in-px: round((math.div($value, 1rem)) * (math.div($size-rem, 1em)) * 16px);
          content: "#{$value} ~ #{$value-in-px}";
        }
      }
    }
  }

}