/**
 * Transitions
 */
.transition-opacity {
  transition: opacity 200ms ease;

  &:hover {
    opacity: 0.85;
    text-decoration: none;
  }
}

/**
 * Cursor
 */
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}

/**
 * Object
 */
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-center {
  object-position: center;
}
.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;
}

@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%;
  }
}

/**
 * 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;
}