$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;


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

	&.active {
		right: 0px;
	}
}

#dsdi-form-main {
	position: relative;

	#dsdi-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;
		}
	}

	#dsdi-directory-options {
		> .ds-row {
			> [class*="ds-col"] {
				.dashicons-dismiss {
					width: 40px;
					height: 25px;
					text-align: center;
					font-size: 25px;
					cursor: pointer;

					&:hover {
						color: red;
					}
				}

				> .dsdi-icon-input-wrapper {
					position: relative;
				}

				#dsdi-popup-icon-suggestions-wrapper {
					position: absolute;
					background-color: #fff;
					top: calc(100% + 5px);
					left: 15px;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					z-index: 50;

					> i {
						cursor: pointer;
						width: 25%;
						font-size: $ds-font-size;
					}
				}
			}
		}
	}
}

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

// 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-color: #ccc !important;
		box-shadow: none !important;
		margin-bottom: 0 !important;

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

@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 ) {

}


/*
███████ ███████ ████████ ████████ ██ ███    ██  ██████  ███████
██      ██         ██       ██    ██ ████   ██ ██       ██
███████ █████      ██       ██    ██ ██ ██  ██ ██   ███ ███████
     ██ ██         ██       ██    ██ ██  ██ ██ ██    ██      ██
███████ ███████    ██       ██    ██ ██   ████  ██████  ███████
*/
#dsdi_options {
	> .inside {
		margin: 0;
		padding: 0;
	}
}

@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 ) {

}