@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.schedule-form {
	& > div {
		width: 100%;
	}

	.form-control-container {
		box-sizing: border-box;
		padding: 1.5rem;
		border: solid 1px var(--studio-gray-10);
		border-radius: 2px;
	}

	.validation-msg {
		margin: 0.5rem 0;
	}

	.components-text-control__input {
		border-color: var(--studio-gray-10);
	}

	.components-radio-control__input {
		padding: 0;
		margin-right: 1rem;
		background: transparent;
		border-color: var(--studio-gray-50);

		&[type="radio"]:checked {
			background: transparent;
			border-color: var(--color-text);

			&::before {
				border-color: var(--color-text);
			}
		}
	}

	.components-checkbox-control {
		border-color: var(--studio-gray-50);

		&.disabled {
			.components-checkbox-control__input {
				border-color: var(--studio-gray-10);
			}

			label {
				color: var(--studio-gray-10);
			}
		}
	}

	.components-checkbox-control__input {
		border-color: var(--studio-gray-20);
	}

	.components-search-control {
		max-width: 300px;
		margin-bottom: 1.5rem;
	}

	.checkbox-options-container {
		max-height: 355px;
		overflow-y: scroll;
		// fixes cut-off box shadow
		margin: -3px;
		padding: 3px;

		display: flex;
		flex-wrap: wrap;

		> * {
			box-sizing: border-box;
			margin-bottom: 0.5rem;

			flex: 0 0 calc(100% - 2rem);
			max-width: calc(100% - 2rem);
			margin-right: 2rem;

			@include break-large {
				flex: 0 0 calc(50% - 2rem);
				max-width: calc(50% - 2rem);
			}

			@include break-xlarge {
				flex: 0 0 calc(33.33% - 2rem);
				max-width: calc(33.33% - 2rem);
			}

			&:last-child:not(.components-spinner) {
				margin-bottom: 0;
			}
		}

		&::-webkit-scrollbar {
			-webkit-appearance: none;
			width: 7px;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 4px;
			background-color: var(--studio-gray-10);
			box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
		}

		&__sites {
			> div {
				display: flex;
				align-items: center;

				label {
					max-width: calc(100% - 2rem);

					.site-slug {
						color: var(--studio-gray-50);
						display: inline-block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 100%;
					}
				}
			}

		}

	}

	.form-field {
		margin-bottom: 3rem;

		&:last-child {
			margin-bottom: 0;
		}

		label {
			font-size: 0.875rem;
			font-weight: 500;
		}

		& > label {
			display: inline-block;
			margin-bottom: 0.875rem;
			font-size: 1.25rem;
		}
	}

	.radio-option {
		padding: 1.5rem;
		flex-basis: 100%;

		.form-field--frequency-container {
			flex-direction: column;
			align-items: flex-start;

			@include break-wide {
				flex-direction: row;
				align-items: center;
			}
		}

		& > .components-radio-control {
			margin-bottom: 1rem;
		}

		&.selected {
			border: solid 1px var(--wp-admin-theme-color) !important;
			border-radius: 2px;

			.components-radio-control__input[type="radio"] {
				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
			}
		}

		&:not(.selected) {
			label {
				color: var(--studio-gray-50);
				font-weight: 400;
			}

			.components-radio-control__input {
				border-color: var(--studio-gray-20);
			}
		}
	}

	.form-field--frequency {
		.components-base-control__field {
			margin: 0;
		}

		& > .components-flex {
			gap: 2rem;

			& > .components-flex-item {
				flex-basis: 100%;
				margin-bottom: 0;
				border: solid 1px var(--studio-gray-10);
				border-radius: 2px;
			}
		}
	}

	.time-controls {
		& > div {
			display: inline-block;

			&:first-child {
				margin-inline-end: 0.5rem;
			}
		}
	}

	.form-field--plugins {
		.components-base-control__field {
			display: flex;
		}

		.components-checkbox-control__label {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}

	.form-field--paths {
		.paths,
		.new-path {
			.components-button {
				min-width: rem(100px);
				justify-content: center;
			}
		}

		.paths {
			.components-input-control__backdrop {
				border-color: var(--studio-gray-0);
			}
		}

		.new-path {
			margin-bottom: 0.75rem;

			.components-input-control__backdrop {
				border-color: var(--studio-gray-10);
			}

			.components-input-base[class*="Root-rootFocusedStyles"] {
				.components-input-control__backdrop {
					border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
				}
			}
		}

		.path {
			margin-bottom: 0.75rem;
		}

		input[readonly] {
			color: var(--studio-gray-50);
			background: var(--studio-gray-0);
		}

		button.is-verifying {
			svg {
				animation: scheduled-updates-rotate 2s linear infinite;
			}
		}
	}
}

.schedule-form-button {
	margin: 0.5rem 0;
}
