/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.sugar-calendar-block {

	&__calendars,
	&__venues,
	&__speakers,
	&__tags {

		margin-bottom: 24px;

		.sc-calendar-block-select,
		.sc-venue-block-select,
		.sc-speaker-block-select,
		.sc-tag-block-select {

			&__control {
				border-color: inherit;
				box-shadow: none;
				min-height: 32px;

				&:focus {
					border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
					box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
				}

				&:hover {
					border-color: inherit;
				}
			}

			&__multi-value {
				border-radius: 9px;
				background-color: #F0F0F0;
				line-height: 14px;

				&__remove {
					border-top-right-radius: 9px;
					border-bottom-right-radius: 9px;

					&:hover {
						background-color: lighten( #D63638, 30% );
						color: #D63638;
					}
				}
			}

			&__indicator-container {
				padding: 4px;
			}

			&__indicator-separator {
				width: 0;
				display: none;
			}

			&__input {
				box-shadow: none;
				min-height: 18px;

				&:focus {
					box-shadow: none;
				}
			}
		}
	}

	// z-indexes
	&__calendars {
		z-index: 99;
	}
	&__tags {
		z-index: 90;
	}
	&__venues {
		z-index: 85;
	}
	&__speakers {
		z-index: 80;
	}

	&__colors {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding: 0 !important;
		border-top: 0 !important;

		.components-tools-panel-item {
			margin-top: 0 !important;
		}
	}
}

.editor-sidebar__panel {

	.sugar-calendar-block__tags {

		/**
		 * Remove the box shadow from the tags input when it is focused.
		 */
		.sc-tag-block-select__input:focus {
			box-shadow: none;
		}
	}
}
