Cacher is the code snippet organizer for pro developers

@import "colors";

.flex {
  display: flex;
}

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

.v-flex-end {
  align-items: flex-end;
}

.h-flex-start {
  justify-content: flex-start;
}

.h-flex-end {
  justify-content: flex-end;
}

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

.h-center {
  text-align: center;
  justify-content: center;
}

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

.full-width {
  width: 100%;
}

.pointer {
  cursor: pointer;
}

$breakpoints: xs sm md lg xl;
$positions: top right bottom left;
@each $b in $breakpoints {
  $i: index($breakpoints, $b);

  .bullet-#{$b} {
    width: #{5 * $i}px;
    height: #{5 * $i}px;
    background-color: $gold-refresh;
    border-radius: 50%;
  }

  .margin-#{$b} {
    margin: #{10 * $i}px;
  }
  @each $p in $positions {
    .margin-#{$p}-#{$b} {
      margin-#{$p}: #{10 * $i}px;
    }
  }

  .padding-#{$b} {
    padding: #{10 * $i}px;
  }
  @each $p in $positions {
    .padding-#{$p}-#{$b} {
      padding-#{$p}: #{10 * $i}px;
    }
  }
}