/*
 * htmlのフォントサイズ
 * @args ベースの画面幅
 */
@function rootPx($baseWidth: 1280px) {
  //   @return math.div(10px, $baseWidth) * 100vw;
  @return calc(10px / $baseWidth * 100vw);
}
/*
   * ルートのフォントサイズを基準にフォントサイズを可変にする
   * @args 最大値（デザイン上の数値）
   */
@function calcFz($max) {
  $value: calc($max / 10);
  @return clamp(10px, #{$value}rem, #{$max}px);
}
/*
   * get_vwの設定
   */
@function vw_pc($size, $viewport: 1280) {
  $rate: calc(100 / $viewport);
  @return $rate * $size * 1vw;
}

@function vw_sp($size, $viewport: 390) {
  $rate: calc(100 / $viewport);
  @return $rate * $size * 1vw;
}
/*
   * breakpointの設定
   */
$widthBasePC: 1280px;
$widthBaseSP: 768px;
$widthBaseSPX: 390px;
$widthBaseTablet: 1000px;

@mixin pc {
  @media screen and (min-width: calc($widthBaseSP)) {
    @content;
  }
}
@mixin sp {
  @media screen and (max-width: #{$widthBaseSP - 1px}) {
    @content;
  }
}
@mixin spx {
  @media screen and (max-width: #{$widthBaseSPX - 1px}) {
    @content;
  }
}

@mixin tb {
  @media screen and (max-width: #{$widthBaseTablet - 1px}) {
    @content;
  }
}

/** --------------------------------
* cssの値を単位を除いて数字だけにしてくれる関数
*
* @param 数字と単位を含む値 10ox, 3remなど
*/
@function stripUnit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

/** --------------------------------
* 値の「単位」を取得する関数
*
* @param $value 数字と単位を含む値 10ox, 3remなど
*/
@function getUnit($value) {
  @return str-slice($value * 0 + "", 2, -1);
}

/** --------------------------------
* pxやremをvwに変換してくれる関数
*
* @param $viewport pcデザインの横幅
* @param $fontSize フォントサイズ(pxでもremでも)
*/
$viewport: 1280px;

@function vw($fontSize, $base-vw: $viewport) {
  $unit: getUnit($fontSize);

  @if $unit == px {
    @return (stripUnit($fontSize) * 100vw) / stripUnit($base-vw);
  } @else if $unit == rem {
    @return (stripUnit($fontSize) * 1000vw) / stripUnit($base-vw);
  }
}

/** --------------------------------
* フォントサイズをレスポンシブで調整する関数
*
* @param $pc pcのフォントサイズ
* @param $sp spのフォントサイズ
*/
@function respValue($pc, $sp, $viewport: 1280px) {
  @return clamp(#{$sp}, #{vw($pc, $viewport)}, #{$pc});
}

@function respValuePC($pc, $viewport: 1280px) {
  @return clamp(1px, #{vw($pc, $viewport)}, #{$pc});
}

///////////////////////////////////////////////////////////////////////

//ABSOLUTE CENTER
@mixin absoluteCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

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

// FLEX CENTER
@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flexHorCenter {
  display: flex;
  justify-content: center;
}

@mixin flexVerCenter {
  display: flex;
  align-items: center;
}

@mixin flexCol {
  display: flex;
  flex-direction: column;
}

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

@mixin flexColHorCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@mixin flexColHorCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

// INVISIBLE
@mixin invisible {
  visibility: hidden;
  opacity: 0;
}

@mixin visible {
  visibility: visible;
  opacity: 1;
}

// OBJECT FIT
@mixin objectFitCover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

// TRUNCATE TEXT
@mixin truncateText($lines) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

// FONT
@mixin fontPrimary($fontSizePC, $fontSizeSP) {
  font-family: $fontPrimary;
  font-size: respValuePC($fontSizePC);
  // animation: opacityAnim 1.5s;

  @include sp {
    font-size: vw_sp($fontSizeSP);
  }
}

@mixin fontSecondary($fontSizePC, $fontSizeSP) {
  font-family: $fontSecondary;
  font-size: respValuePC($fontSizePC);
  // animation: opacityAnim 1.5s;

  @include sp {
    font-size: vw_sp($fontSizeSP);
  }
}

@mixin ttNorms($fontSizePC, $fontSizeSP, $weight) {
  font-family: "ttnorms-#{$weight}", sans-serif;
  font-size: respValuePC($fontSizePC);
  font-weight: $weight;
  // animation: opacityAnim 1.5s;

  @include sp {
    font-size: vw_sp($fontSizeSP);
  }
}

@keyframes opacityAnim {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@mixin glass {
  background: rgba(255, 255, 255, 0.7);
  border-radius: respValuePC(24px);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 2px solid $colorWhite;
}

@mixin glassDark {
  background: rgba(240, 240, 240, 0.7);
  border-radius: respValuePC(24px);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 2px solid $colorWhite;
}