@use '../mixins/mixins' as mixins;

@for $i from 0 through 50 {
  .nfr-gap-#{$i} {
    gap: calc(#{$i} * 2px);
  }

  .nfr-p-#{$i} {
    padding: calc(#{$i} * 2px);
  }

  .nfr-px-#{$i} {
    padding: 0 calc(#{$i} * 2px);
  }

  .nfr-pl-#{$i} {
    padding-left: calc(#{$i} * 2px);
  }

  .nfr-py-#{$i} {
    padding: calc(#{$i} * 2px) 0;
  }

  .nfr-pb-#{$i} {
    padding-bottom: calc(#{$i} * 2px);
  }

  .nfr-pr-#{$i} {
    padding-right: calc(#{$i} * 2px);
  }

  .nfr-pt-#{$i} {
    padding-top: calc(#{$i} * 2px);
  }

  .nfr-m-#{$i} {
    margin: calc(#{$i} * 2px);
  }

  .nfr-mx-#{$i} {
    margin: 0 calc(#{$i} * 2px);
  }

  .nfr-my-#{$i} {
    margin: calc(#{$i} * 2px) 0;
  }

  .nfr-mt-#{$i} {
    margin-top: calc(#{$i} * 2px);
  }

  .nfr-mb-#{$i} {
    margin-bottom: calc(#{$i} * 2px);
  }

  .nfr-mr-#{$i} {
    margin-right: calc(#{$i} * 2px);
  }

  .nfr-ml-#{$i} {
    margin-left: calc(#{$i} * 2px);
  }

  .nfr-w-#{$i * 5} {
    width: calc(#{$i} * 5%);
  }

  .nfr-h-#{$i * 5} {
    height: calc(#{$i} * 5%);
  }
}

.nfr-m-auto {
  margin: auto;
}

.nfr-w-auto {
  width: auto;
}

.nfr-w-100 {
  width: 100%;
}

.nfr-h-100 {
  height: 100%;
}

.nfr-h-fit-content {
  height: fit-content;
}

.nfr-w-fit-content {
  width: fit-content;
}

.nfr-row {
  @include mixins.row();
}

.nfr-column {
  @include mixins.column(center);
}

.nfr-align-center {
  align-items: center;
}

.nfr-align-start {
  align-items: flex-start;
}

.nfr-justify-between {
  justify-content: space-between;
}