@charset "utf-8";

// -----------------------------------------------------
// Media Query
// -----------------------------------------------------
@mixin max($width: $mq-max) {
  @media only screen and (max-width: $width) {
    @content;
  }
}

@mixin min($width: $mq-min) {
  @media only screen and (min-width: $width) {
    @content;
  }
}

// -----------------------------------------------------
// Position
// -----------------------------------------------------
@mixin fit-full($position: absolute) {
  width: 100%;
  height: 100%;
  position: $position;
  top: 0;
  left: 0;
}

@mixin center($position: absolute) {
  position: $position;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin center-vertical($position: absolute) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}

@mixin center-horizontal($position: absolute) {
  position: $position;
  left: 50%;
  transform: translateX(-50%);
}

@mixin center-flex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// -----------------------------------------------------
// Transition
// -----------------------------------------------------
@mixin transition-fade {
  transition: opacity 0.1s linear;
}
@mixin transition-collection {
  transition: opacity 0.1s linear, color 0.1s linear, border-color 0.1s linear, background-color 0.1s linear;
}

// -----------------------------------------------------
// Hover
// -----------------------------------------------------
@mixin hover-fade {
  @include transition-fade;
  @include min { 
    &:hover {
      opacity: 0.7;
    }
  }
}

// -----------------------------------------------------
// Background
// -----------------------------------------------------
@mixin bg-cover {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

// -----------------------------------------------------
// Border
// -----------------------------------------------------
@mixin b($color: $color-border) {
  border: $width-border-form solid $color;
}

@mixin radius {
  border-radius: 0;
}

@mixin dot-border {
  background-image: linear-gradient(to right, $color-border, $color-border 50%, transparent 50%, transparent 100%);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 20px 1px;
}

// -----------------------------------------------------
// Text
// -----------------------------------------------------
@mixin font-sans {
  font-family: YuGothic, Meiryo, sans-serif;
}

@mixin font-en {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

@mixin font-source {
  font-family: Menlo, Monaco, 'Courier New', Consolas, monospace;
}

@mixin hide-text {
  font: 0 / 0;
  color: transparent;
}

// -----------------------------------------------------
// Text
// -----------------------------------------------------
@mixin fz-xs {
  @include max {
    font-size: 10px;
  }
  @include min {
    font-size: 12px;
  }
}
@mixin fz-s {
  @include max {
    font-size: 12px;
  }
  @include min {
    font-size: 14px;
  }
}

@mixin fz-sm {
  @include max {
    font-size: 14px;
  }
  @include min {
    font-size: 16px;
  }
}

@mixin fz-m {
  @include max {
    font-size: 14px;
  }
  @include min {
    font-size: 16px;
  }
}

@mixin fz-ml {
  @include max {
    font-size: 14px;
  }
  @include min {
    font-size: 18px;
  }
}

@mixin fz-l {
  @include max {
    font-size: 18px;
  }
  @include min {
    font-size: 28px;
  }
}

@mixin fz-xl {
  @include max {
    font-size: 24px;
  }
  @include min {
    font-size: 32px;
  }
}

@mixin fz-grande {
  @include max {
    font-size: 32px;
  }
  @include min {
    font-size: 48px;
  }
}

@mixin fz-venti {
  @include max {
    font-size: 32px;
  }
  @include min {
    font-size: 64px;
  }
}

@mixin fz-poem {
  @include max {
    font-size: 16px;
  }
  @include min {
    font-size: 20px;
  }
}

@mixin fz-detail {
  @include max {
    font-size: 20px;
  }
  @include min {
    font-size: 22px;
  }
}

@mixin fz-form {
  @include max {
    font-size: 16px;
  }
  @include min {
    font-size: 14px;
  }
}

@mixin lh-base {
  @include max {
    line-height: 1.8;
  }
  @include min {
    line-height: 2;
  }
}

@mixin lh-0 {
  line-height: 0;
}

@mixin lh-1 {
  line-height: 1;
}

@mixin lh-min {
  line-height: 1.2;
}

@mixin lh-en {
  line-height: 1.4;
}