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