@import './mixin/color-mixin.scss';

@mixin flex1 { flex: 1; }
@mixin flex { display: flex; }
@mixin inline-flex { display: inline-flex; }
@mixin grid { display: grid; }
@mixin inline-grid { display: inline-grid; }

@mixin column { flex-direction: column; }
@mixin align-center { align-items: center; }
@mixin justify-center { justify-content: center; }

@mixin flex-column {
  @include flex;
  @include column;
}
@mixin inline-flex-column {
  @include inline-flex;
  @include column;
}

@mixin flex-center {
  @include flex;
  @include align-center;
  @include justify-center;
}

@mixin inline-flex-center {
  @include inline-flex;
  @include align-center;
  @include justify-center;
}

@mixin w100 { width: 100%; }
@mixin h100 { height: 100%; }

@mixin fixed { position: fixed; }
@mixin relative { position: relative; }
@mixin absolute { position: absolute; }

@mixin margin0 { margin: 0; }
@mixin padding0 { padding: 0; }
@mixin left($value) { left: $value; }
@mixin right($value) { right: $value; }

@mixin fixed-full {
  @include fixed;
  @include w100;
  @include h100;
  @include left(0);
  @include right(0);
}

@mixin transparent { @include black-bg(0); }

@mixin z-index($value) { z-index: $value; }