$ds-global-width-sm:   576px; // Bootstrap 4: 576px
$ds-global-width-md:   768px; // Bootstrap 4: 768px
$ds-global-width-lg:   992px; // Bootstrap 4: 992px
$ds-global-width-xl:  1200px; // Bootstrap 4: 1200px
$ds-global-width-xxl: 1680px; // DS Frame: 1680px

$ds-grey-light: #f9f9f9;
$ds-grey:       #efefef;
$ds-grey-dark:  #515151;
$ds-red:        #D0021B;
$ds-green:      #f8fff8;

$white: #fff;
$black: #000;

$ds-font-size: 16px;
$ds-line-height: 18px;

// Logo & Favicon.
.ds-image-load {
	&.loaded {
		.ds-image-add {
			display: none;
		}
	}

	&:not( .loaded ) {
		.ds-image-remove {
			display: none;
		}
	}

	img {
		background: $ds-grey;
		padding: 5px;
		min-width: 100%;
		min-height: 30px;
	}
}

// Background images.
#background-image-picker {
	> .ds-radio-image {
		> .remove {
			position: absolute;
			border-radius: 0 0 0 5px;
			top: 0;
			right: 7.5px;
			padding: 1px 6px;
			background: $ds-grey-dark;
			color: $white;
			font-weight: bold;
			z-index: 1;
		}
	}
}

#background-image-add {
	transition: opacity 0.4s;
	background: transparent;
	border: 2px solid $ds-grey;
	width: 100%;
	height: 100%;
	min-height: 120px;
	font-weight: bold;
	font-size: $ds-font-size;
	color: $ds-grey-dark;
	opacity: 0.5;
	cursor: pointer;

	&:hover {
		opacity: 1;
	}
}

// WP Color Picker.
.wp-picker-container {
	input {
		height: 30px !important;
		line-height: 28px !important;
		background-color: $ds-grey-light !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	> .wp-color-result.button {
		height: 30px !important;
		border-radius: 0 !important;
		box-shadow: none !important;

		> .wp-color-result-text,
		> .color-alpha {
			height: 28px !important;
			line-height: 28px !important;
		}
	}
}

#dssm-form-saved-notice {
	transition: right 0.4s;
	position: fixed;
	width: 100%;
	max-width: 300px;
	top: 50px;
	right: -310px;
	z-index: 10;

	&.active {
		right: 0px;
	}
}

#dssm-form-main {
	position: relative;

	#dssm-form-loading-panel {
		transition: visibility 0.4s;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.5);
		z-index: 9;
		visibility: hidden;

		&.active {
			visibility: visible;
		}
	}
}

.dssm-sticky-bottom {
	position: sticky;
	bottom: 0;
	z-index: 8;
}

@media( min-width: $ds-global-width-sm ) {

}

@media( min-width: $ds-global-width-md ) {

}

@media( min-width: $ds-global-width-lg ) {

}

@media( min-width: $ds-global-width-xl ) {

}

@media( min-width: $ds-global-width-xxl ) {

}