.video-button {

	@include flex;
	@include align-items(center);

	&-caption {
		font-family: $font-action;
		font-size: $font-size-action;
		font-weight: bold;
		margin-left: 0.75rem;
	}

	.icon-button {

		@include transition;

		.icon {
			transform: translateX(0.15rem);
		}

		&:hover {
			transform: $scale;
		}
	}

	&:not(.-outlined) {

		.icon-button {
			background-color: $color-black;

			.icon {
				color: $color-white;
			}
		}
	}

	&:not(.-outlined):not(.-blurred) {

		.icon-button {

			&:hover {
				background-color: $color-red;
			}
		}
	}

	&.-outlined {

		.icon-button {
			border: 2px solid currentColor;

			&:hover {
				background-color: transparent;
				color: $color-red;

				.icon {
					color: currentColor;
				}
			}
		}
	}

	&.-blurred {

		.icon-button {
			background-color: $color-neutral-50;
			backdrop-filter: blur(0.15rem);
		}
	}

	&.-small {

		.video-button-caption {
			font-size: $font-size-action-small;
		}
	}

	&.-large {

		.video-button-caption {
			font-size: $font-size-action-large;
		}
	}

	&.-animation {

		.icon-button {
			position: relative;

			&::after {
				border-color: inherit;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 1;
				animation-timing-function: $transition-function;
				animation-duration: 1.5s;
				animation-name: video_sc;
				animation-iteration-count: infinite;
				animation-delay: 1s;

				@include pseudo;
				@include border-radius(100%);
				@include box-shadow(false, 0px, 0px, 0px, 0px, rgba($color-black, 0.4));
			}

			@keyframes video_sc {

				0% {
					opacity: 1;

					@include box-shadow(false, 0px, 0px, 0px, 0px, rgba($color-black, 0.35));
				}

				85% {
					opacity: 0;

					@include box-shadow(false, 0px, 0px, 0px, 1rem, rgba($color-black, 0.35));
				}

				100% {
					opacity: 0;

					@include box-shadow(false, 0px, 0px, 0px, 0px, rgba($color-black, 0.35));
				}
			}

			&:hover {

				&::after {
					animation: none;
				}
			}
		}
	}

	&.-with-shadow {

		&:not(.-with-preview) {

			.icon-button {

				@include drop-shadow;
			}
		}

		&.-with-preview {

			.preview-image {

				@include drop-shadow;
			}
		}
	}

	&.-with-preview {
		position: relative;

		.video-button-holder {

			@include centered;
			@include flex;
			@include flex-direction(column);
			@include align-items(center);
		}

		.video-button-caption {
			margin: 0.75rem 0 -1.5rem 0;

			@include fadeUp-hidden;
		}

		.preview-image {
			min-width: 100%;

			@include border-radius;
		}

		&:hover {

			.video-button-caption {

				@include faded;
			}
		}
	}
}

// .minimal-scheme {

// 	.video-button {

// 		&-caption {
// 			text-transform: uppercase;
// 		}
// 	}
// }
