/**
* 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;
}
.object-bottom {
  object-position: bottom;
}

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