.components-guide {
	$image-height: 300px;
	$image-width: 320px;

	@include break-small() {
		width: 600px;
	}

	.components-modal__content {
		padding: 0;
		margin-top: 0;
		border-radius: $radius-block-ui;

		&::before {
			content: none;
		}
	}

	.components-modal__header {
		border-bottom: none;
		padding: 0;
		position: sticky;

		.components-button {
			align-self: flex-start;
			margin: $grid-unit-10 $grid-unit-10 0 0;
			position: static;

			&:hover {
				svg {
					fill: #fff;
				}
			}
		}
	}

	&__container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: -$header-height;
		min-height: 100%;
	}

	&__page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;

		@include break-small() {
			min-height: $image-height;
		}
	}

	&__footer {
		align-content: center;
		display: flex;
		height: 30px;
		justify-content: center;
		margin: 0 0 $grid-unit-30 0;
		padding: 0 $grid-unit-40;
		position: relative;
		width: 100%;
	}

	&__page-control {
		margin: 0;
		text-align: center;

		li {
			display: inline-block;
			margin: 0;
		}

		.components-button {
			height: 30px;
			min-width: 20px;
			margin: -6px 0;
		}
	}
}

.components-modal__frame.components-guide {
	border: none;
	min-width: 312px;
	height: 80vh;
	max-height: 575px;

	@media ( max-width: $break-small ) {
		margin: auto;
		max-width: calc(100vw - #{$grid-unit-20} * 2);
	}
}

.components-button {
	&.components-guide__back-button,
	&.components-guide__forward-button,
	&.components-guide__finish-button {
		height: 30px;
		position: absolute;
	}

	&.components-guide__back-button,
	&.components-guide__forward-button {
		font-size: $default-font-size;
		padding: 4px 2px;

		&.has-text svg {
			margin: 0;
		}

		&:hover {
			text-decoration: underline;
		}
	}

	&.components-guide__back-button {
		left: $grid-unit-40;
	}

	&.components-guide__forward-button {
		right: $grid-unit-40;
		color: #1386bf;
		font-weight: bold;
	}

	&.components-guide__finish-button {
		right: $grid-unit-40;
	}

	&.components-guide__inline-finish-button {
		display: none;
	}
}