@import './mixins.scss';

.flex {
  display: flex;
}
.align-start {
	align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
	align-items: flex-end;
}
.align-stretch {
	align-items: stretch;
}
.self-start {
	align-self: flex-start;
}
.self-center {
	align-self: center;
}
.self-end {
	align-self: flex-end;
}
.self-stretch {
	align-self: stretch;
}
.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}
.flex-sub {
  flex: 1;
}
.flex-column {
	flex-direction: column;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-center {
  @extend .flex;
  @extend .justify-center;
  @extend .align-center;
}

.center {
  @include center;
}

.abs {
  @include abs;
}
@each $dir in top, right, bottom, left {
  .abs-#{$dir} {
    @include abs($dir);
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
}
@mixin square($gapSpace, $index) {
  position: relative;
  margin-right: $gapSpace;
  margin-bottom: $gapSpace;
  padding-bottom: calc((100% - (#{$index - 1}) * #{$gapSpace}) / #{$index});
  height: 0;
  width: calc((100% - (#{$index - 1}) * #{$gapSpace}) / #{$index});
  overflow: hidden;
  &:nth-child(#{$index}n) {
    margin-right: 0;
  }
  @for $idx from 1 through $index {
    &:nth-child(#{$idx}) {
      margin-top: $gapSpace;
    }
  }
}
@for $index from 1 through 5 {
  .col-#{$index} {
    width: 100 / $index * 1%;
    box-sizing: border-box;
    &.square.lg {
      @include square(20px, $index);
    }
    &.square {
      @include square(15px, $index);
    }
    &.square.sm {
      @include square(10px, $index);
    }
    &.square.xs {
      @include square(6px, $index);
    }
    &.square.xxs {
      @include square(4px, $index);
    }
  }
}

.square {
  position: relative;
  padding-bottom: 100%;
  height: 0;
}

.lh-0 {
  line-height: 0;
}
.lh-1 {
  line-height: 1;
}
.lh {
  line-height: 1.6;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix {
  *zoom: 1;
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.over-hidden {
  overflow: hidden;
}
.over-scroll {
  overflow: scroll;
}
.over-auto {
  overflow: auto;
}

.relative {
  position: relative;
}

.full {
  width: 100%;
  height: 100%;
}
.full-width {
  width: 100%;
}
.full-height {
  height: 100%;
}

.block {
  display: block;
}

@each $dir in top, right, bottom, left, container {
  @if ($dir == container) {
    .safe {
      padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
  } @else {
    .safe-#{$dir} {
      padding-#{$dir}: constant(safe-area-inset-#{$dir});
      padding-#{$dir}: env(safe-area-inset-#{$dir});
    }
  }
}