/**
 * メディアと見た目
 * object-fit / object-position、アスペクト比、透明度。
 * トランジションや hover などのインタラクションは 11_interaction.css にある。
 */

/**
 * Object
 */
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-center {
  object-position: center;
}
.object-right {
  object-position: right;
}
.object-top {
  object-position: top;
}
.object-bottom {
  object-position: bottom;
}
.object-left {
  object-position: left;
}

@media screen and (min-width: 768px) {
  .md--object-center {
    object-position: center;
  }
  .md--object-top {
    object-position: top;
  }
  .md--object-bottom {
    object-position: bottom;
  }
  .md--object-left {
    object-position: left;
  }
  .md--object-right {
    object-position: right;
  }
}
@media screen and (min-width: 1024px) {
  .lg--object-center {
    object-position: center;
  }
  .lg--object-top {
    object-position: top;
  }
  .lg--object-bottom {
    object-position: bottom;
  }
  .lg--object-left {
    object-position: left;
  }
  .lg--object-right {
    object-position: right;
  }
}

/**
 * Aspect Ratio
 */
.aspect-video {
  aspect-ratio: 16 / 9;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-4x3 {
  aspect-ratio: 4 / 3;
}
.aspect-3x2 {
  aspect-ratio: 3 / 2;
}
.aspect-3x4 {
  aspect-ratio: 3 / 4;
}
.aspect-2x3 {
  aspect-ratio: 2 / 3;
}
.aspect-3x1 {
  aspect-ratio: 3 / 1;
}
.aspect-2x1 {
  aspect-ratio: 2 / 1;
}

@media screen and (min-width: 768px) {
  .md--aspect-unset {
    aspect-ratio: unset;
  }
}
@media screen and (min-width: 1024px) {
  .lg--aspect-unset {
    aspect-ratio: unset;
  }
}
@media screen and (min-width: 1200px) {
  .xl--aspect-unset {
    aspect-ratio: unset;
  }
}

/**
 * Paddingを使用したAspect Ratio
 * ex)
 * ```html
 * <div class="aspect-ratio aspect-video">
 *  <iframe src="https://www.youtube.com/embed/..." frameborder="0"></iframe>
 * </div>
 * ```
 */
.aspect-ratio {
  position: relative;

  & > .aspect-ratio__content,
  & > img,
  & > iframe,
  & > video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &.aspect-video {
    padding-top: 56.25%;
  }
  &.aspect-square {
    padding-top: 100%;
  }
  &.aspect-4x3 {
    padding-top: 75%;
  }
  &.aspect-3x2 {
    padding-top: 66.6667%;
  }
  &.aspect-3x4 {
    padding-top: 133.3333%;
  }
  &.aspect-2x3 {
    padding-top: 150%;
  }
}

/**
 * Opacity
 */
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}

/**
 * 背景として敷くメディア
 *
 * 祖先の position: relative の内側いっぱいに画像や動画を敷く。
 */
.backdrop-object {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/**
 * Google Map の埋め込み
 *
 * iframe は幅と高さを属性で持つためそのままではレスポンシブにならない。
 * 比率を固定して iframe を敷く。比率は案件ごとに調整する。
 */
.map-container {
  position: relative;
  aspect-ratio: 3 / 2;

  & > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/**
 * BoxShadow
 */
:root {
  --elevation-1: 0 2px 6px 1px rgba(0, 0, 0, 0.02), 0 4px 12px 2px rgba(0, 0, 0, 0.04), 0 8px 24px 4px rgba(0, 0, 0, 0.08), 0 16px 48px 8px rgba(0, 0, 0, 0.12);
  --elevation-2: 0 2px 6px 1px rgba(0, 0, 0, 0.08), 0 4px 12px 2px rgba(0, 0, 0, 0.08), 0 8px 24px 4px rgba(0, 0, 0, 0.08);
}

.elevation-1: {
  box-shadow: var(--elevation-1);
}
.elevation-2: {
  box-shadow: var(--elevation-2);
}