@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/breakpoints";

$grey-header: #151b1e;

.courses {
	.signup-header {
		color: var(--color-text-inverted);

		svg.wordpress-logo {
			fill: var(--color-text-inverted);
		}
	}

	.step-container {
		.step-container__navigation.action-buttons {
			background-color: var(--studio-gray-100);
			border: 0;
			box-shadow: 0 -1px 0 #2c3234;

			button.navigation-link.is-borderless {
				color: #fff;

				svg {
					fill: #fff;
				}
			}

			@include break-small {
				background-color: $grey-header;
				box-shadow: none;
			}
		}

		&.has-navigation {
			.step-container__content {
				margin-top: -60px;
				padding-top: 70px;

				@include break-small {
					margin-top: 0;
				}
			}
		}

		.step-container__content {
			padding-top: 60px;
			background-color: $grey-header;

			.videos-ui {
				position: relative;
				width: 100%;
				min-height: calc(100vh - 60px);

				span,
				p {
					font-size: 0.875rem;
				}

				.videos-ui__header .videos-ui__header-content .videos-ui__summary svg {
					fill: #fff9;
				}

				.videos-ui__body {
					svg use {
						fill: #fff;
					}

					.videos-ui__active-video-content {
						p {
							padding-bottom: 1.5em;
						}
					}
				}
			}
		}
	}

	.courses__footer {
		display: none;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 20px;
		box-shadow: 0 -1px 0 #2c3234;
		background-color: var(--studio-gray-100);
		animation: appear 0.3s ease-in-out;

		@include reduce-motion( "animation" );

		.courses__footer-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 72px;
			max-width: 1160px;
			margin: 0 auto;
		}

		.courses__footer-button {
			flex-shrink: 0;
			margin-left: 20px;
			border-radius: 4px;
			border-color: transparent;
			color: var(--studio-gray-100);
			font-weight: 500;
			transition: opacity 0.2s ease-out;

			&:hover {
				opacity: 0.9;
			}
		}

		@include break-small {
			display: block;
		}
	}
}
