@import './variables';

/* -------------------------------------------------------------------------- */
/*                              PADDING / MARGINS                             */
/* -------------------------------------------------------------------------- */

@each $abbr, $name in ('t': 'top', 'r': 'right', 'b': 'bottom', 'l': 'left') {
  @for $i from 1 through $padding-max-rem-multiple {
    .m#{$abbr}-#{$i} {
      margin-#{$name}: 1rem * $i;
    }
  }
}
@each $abbr, $name in ('t': 'top', 'r': 'right', 'b': 'bottom', 'l': 'left') {
  @for $i from 1 through $margin-max-rem-multiple {
    .p#{$abbr}-#{$i} {
      padding-#{$name}: 1rem * $i;
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                            HORIZONTAL CENTERING                            */
/* -------------------------------------------------------------------------- */

@for $i from 1 through 3000 {
  .mx-auto-#{$i}px {
    width: $i * 1px;
    margin: auto;
  }
}

/* -------------------------------------------------------------------------- */
/*                              VISUAL DEBUGGING                              */
/* -------------------------------------------------------------------------- */
.find-red { border: 1px solid red; }
.find-blue { border: 1px solid rgb(57, 57, 255); }
.find-green { border: 1px solid rgb(23, 130, 23); }
.find-purple { border: 1px solid rgb(204, 99, 204); }
.find-grey { border: 1px solid grey; }

// Remove ability for cursor to highlight
.no-highlighting {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

/* -------------------------------------------------------------------------- */
/*                                   GLOBALS                                  */
/* -------------------------------------------------------------------------- */
.disabled {
  filter: grayscale(1);
  opacity: 0.35;
  pointer-events: none;

  &.darken {
    filter: brightness(0.9);

    &.twenty { filter: brightness(0.8); }
    &.thirty { filter: brightness(0.7); }
  }
}


/* -------------------------------------------------------------------------- */
/*                                   FLEXBOX                                  */
/* -------------------------------------------------------------------------- */

// Flex direction
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

// If nowrap
.nowrap {
  flex-wrap: nowrap;
}

// Align-Items
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}
.align-stretch {
  align-items: stretch;
}
.align-baseline {
  align-items: baseline;
}

// Align-Self
.align-self-start {
  align-self: flex-start;
}
.align-self-end {
  align-self: flex-end;
}
.align-self-center {
  align-self: center;
}
.align-self-stretch {
  align-self: stretch;
}
.align-self-baseline {
  align-self: baseline;
}

// Justify-Content
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-stretch {
  justify-content: stretch;
}
.justify-baseline {
  justify-content: baseline;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

// Justify-Self
.justify-self-start {
  justify-self: flex-start;
}
.justify-self-end {
  justify-self: flex-end;
}
.justify-self-center {
  justify-self: center;
}
.justify-self-stretch {
  justify-self: stretch;
}
.justify-self-baseline {
  justify-self: baseline;
}