/* stylelint-disable declaration-no-important */

// =============================================================================
// :: Preview
// =============================================================================
// .bp-c-preview {}

// =============================================================================
// :: Elements
// =============================================================================
.bp-c-preview__title {
	font-family: $bp-font-family-primary !important;
}

.bp-c-preview__content {
	border-color: $bp-border-color-base !important;
	background-color: $bp-background-color-white !important;
}

.bp-c-preview__controls {
	border-bottom-color: $bp-border-color-base !important;
	background-color: $bp-background-color-light !important;
}

.bp-c-preview__sandbox,
.bp-c-preview__toggle {

	&:hover {

		.bp-c-icon {

			fill: $bp-primary-color !important;
		}
	}
}

.bp-c-preview__resize {
	border-left-color: $bp-border-color-base !important;
	border-right-color: $bp-border-color-base !important;
	background-color: $bp-background-color-light !important;

	&::before {
		background-color: $bp-background-color-medium !important;
	}

	&:hover {

		&::before {
			background-color: $bp-primary-color !important;
		}
	}
}

.bp-c-preview__iframe-offset {
	background-color: $bp-background-color-light !important;
}

.bp-c-preview__viewport-input,
.bp-c-preview__viewport-suffix {
	font-family: $bp-font-family-secondary !important;

	color: $bp-text-color-base !important;
	border-color: $bp-border-color-base !important;
}

.bp-c-preview__viewport-input {
	background-color: $bp-background-color-white !important;

	@include bp-placeholder() {
		font-family: $bp-font-family-secondary !important;

		color: $bp-text-color-medium !important;
	}
}

// =============================================================================
// :: States
// =============================================================================
.bp-c-preview {

	&.has-code-enabled {

		.bp-c-preview__toggle {
			fill: $bp-primary-color !important;
		}
	}
}