.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 {

		.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.35));
			}

			@keyframes video_sc {

				0% {
					opacity: 1;

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

				100% {
					opacity: 0;

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

			&:hover {

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

	&.-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%;
		}

		&:hover {

			.video-button-caption {

				@include faded;
			}
		}
	}
}

.minimal-scheme {

	.video-button {

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