@import '../../shared/styles/gutenberg-variables.scss';

.wp-block-jetpack-business-hours {
	overflow: hidden;

	dd span {
		display: block;
	}

	.business-hours__row {
		display: flex;

		&.business-hours-row__add,
		&.business-hours-row__closed {
			margin-bottom: 20px;
		}

		.business-hours__day {
			width: 44%;
			display: flex;
			align-items: baseline;

			.business-hours__day-name {
				width: 60%;
				font-weight: bold;
				overflow-x: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.components-form-toggle {
				margin-right: 4px;
			}
		}

		.business-hours__hours {
			width: 44%;
			margin: 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.components-base-control {
				display: inline-block;
				margin-bottom: 0;
				width: 48%;

				&.business-hours__open {
					margin-right: 4%;
				}

				.components-base-control__label {
					margin-bottom: 0;
				}
			}
		}
	}

	.business-hours__remove {
		align-self: flex-end;
		margin-bottom: 8px;
		text-align: center;
		width: 10%;
	}

	.business-hours-row__add button:hover {
		box-shadow: none !important;
	}

	.business-hours__remove button {
		display: block;
		margin: 0 auto;
	}

	.business-hours-row__add .components-button.is-default:hover,
	.business-hours__remove .components-button.is-default:hover,
	.business-hours-row__add .components-button.is-default:focus,
	.business-hours__remove .components-button.is-default:focus,
	.business-hours-row__add .components-button.is-default:active,
	.business-hours__remove .components-button.is-default:active {
		background: none;
		box-shadow: none;
	}
}

/**
 * We consider the editor area to be small when the business hours block is:
 *   - within a column block
 *   - in a screen < xlarge size with the sidebar open
 *   - in a screen < small size
 * In these cases we'll apply small screen styles.
 */
@mixin editor-area-is-small {
	@media ( max-width: $break-xlarge ) {
		.is-sidebar-opened {
			@content;
		}
	}
	@media ( max-width: $break-small ) {
		@content;
	}

	.wp-block-columns {
		@content;
	}
}

@include editor-area-is-small() {
	.wp-block-jetpack-business-hours {
		.business-hours__row {
			flex-wrap: wrap;

			&.business-hours-row__add {
				.business-hours__day,
				.business-hours__remove {
					display: none;
				}
			}

			.business-hours__day {
				width: 100%;
			}

			.business-hours__hours {
				width: 78%;
			}
			.business-hours__remove {
				width: 18%;
			}
		}
	}
}
