.hp {
	/*--------------------------------------------------------------
	Icons
	--------------------------------------------------------------*/
	&-icon {
		font-size: 16px;
	}
	/*--------------------------------------------------------------
	Links
	--------------------------------------------------------------*/
	&-link {
		display: inline-flex;
		align-items: center;
		cursor: pointer;
		text-decoration: none;

		&:not(:hover) {
			color: inherit;
		}

		i {
			&:first-child {
				margin-right: 0.5rem;
			}
		}
	}
	/*--------------------------------------------------------------
	Statuses
	--------------------------------------------------------------*/
	&-status {
		span {
			display: inline-block;
			border: 1px solid rgba(0, 0, 0, 0.06);
			padding: 0.4rem 0.5rem;
			white-space: nowrap;
			line-height: 1;
			font-size: 80%;
		}

		&--draft,
		&--trash,
		&--wc-refunded {
			span {
				color: #ff3860;
				border-color: #ff3860;
			}
		}

		&--pending,
		&--wc-on-hold,
		&--wc-processing {
			span {
				color: #ffcb00;
				border-color: #ffcb00;
			}
		}

		&--publish,
		&--wc-completed {
			span {
				color: #15cd72;
				border-color: #15cd72;
			}
		}
	}
	/*--------------------------------------------------------------
	Blocks
	--------------------------------------------------------------*/
	&-block,
	&-form {
		&[data-state=loading] {
			position: relative;
			opacity: 0.5;

			&::after {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 1000;
			}
		}
	}
	/*--------------------------------------------------------------
	Forms
	--------------------------------------------------------------*/
	&-form {
		&--narrow {
			width: 100%;
		}

		&__description,
		&__messages {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		& > &__messages {
			&:not(:last-child) {
				margin-bottom: 1.5rem;
			}
		}

		&__messages {
			display: none;
			border-left: 3px solid transparent;
			background-color: rgba(0,0,0,0.04);
			padding: 1rem 1.5rem;

			&--info {
				border-left-color: #00a0d2;
			}

			&--warning {
				border-left-color: #ffb900;
			}

			&--error {
				border-left-color: #dc3232;
			}

			&--success {
				border-left-color: #46b450;
			}

			> div {
				&:not(:last-child) {
					margin-bottom: 0.5rem;
				}
			}
		}

		&__fields,
		&__footer {
			&:not(:last-child) {
				margin-bottom: 2rem;
			}
		}

		&__header {
			&:not(:last-child) {
				margin-bottom: 1.5rem;
			}
		}

		&__actions,
		&__footer {
			display: flex;
			align-items: center;
		}

		&__footer {
			justify-content: space-between;
		}

		&--narrow &__button {
			width: 100%;

			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}
		@media only screen and (max-width:47.99em) {
			&__button {
				width: 100%;

				&:not(:last-child) {
					margin-bottom: 1rem;
				}
			}
		}

		&--narrow &__actions,
		&--narrow &__footer {
			flex-direction: column;
		}
		@media only screen and (max-width:47.99em) {
			&__actions,
			&__footer {
				flex-direction: column;
			}
		}

		&__field {
			&:not(:last-child) {
				margin-bottom: 1.5rem;
			}

			&--hidden {
				display: none;
			}
		}

		&__action {
			&:not(:last-child) {
				margin-right: 1.5rem;
			}
		}

		&--narrow &__action {
			&:not(:last-child) {
				margin: 0 0 0.5rem;
			}
		}
		@media only screen and (max-width:47.99em) {
			&__action {
				&:not(:last-child) {
					margin: 0 0 0.5rem;
				}
			}
		}

		&--narrow button&__action {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}
		@media only screen and (max-width:47.99em) {
			& button&__action {
				&:not(:last-child) {
					margin-bottom: 1rem;
				}
			}
		}
	}

	&-modal &-form {
		width: 100%;

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

		&__button {
			width: 100%;

			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		&__actions,
		&__footer {
			flex-direction: column;
		}

		&__action {
			&:not(:last-child) {
				margin: 0 0 0.5rem;
			}
		}

		button&__action {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}
	}

	&-field {
		&--hidden {
			display: none;
		}

		&--email,
		&--number,
		&--password,
		&--search,
		&--select,
		&--text,
		&--textarea,
		&--url {
			width: 100%;
			min-width: 1px;
		}

		&--textarea {
			max-width: 100%;
			min-height: 8rem;
		}

		&--attachment-upload {
			&::after {
				display: table;
				clear: both;
				content: '';
			}

			label {
				position: relative;
				float: left;
				overflow: hidden;
				margin: 0 !important;
				width: auto !important;
			}

			input[type='file'] {
				font-size: 200px !important;
				position: absolute;
				top: 0;
				right: 0;
				margin: 0;
				cursor: pointer;
				opacity: 0;
				direction: ltr;
			}

			> div:first-child {
				&:not(:empty) {
					margin-bottom: -2rem;
					padding-bottom: 1rem;
				}

				> div {
					position: relative;
					margin-bottom: 2rem;

					img {
						display: block;
						width: 100%;
						height: auto;
					}

					&:not(:only-child) img {
						cursor: move;
					}

					> div {
						position: relative;
						padding-top: 100%;
						background-color: rgba(0,0,0,0.04);

						&::before {
							font-family: 'Font Awesome 5 Free';
							font-weight: 900;
							font-style: normal;
							font-variant: normal;
							line-height: 1;
							display: inline-block;
							-moz-osx-font-smoothing: grayscale;
							-webkit-font-smoothing: antialiased;
							text-rendering: auto;
							position: absolute;
							left: 50%;
							top: 50%;
							content: '\f15b';
							font-size: 64px;
							margin: -32px 0 0 -24px;
							color: rgba(0,0,0,0.05);
							@media only screen and (max-width:47.99em) {
								font-size: 48px;
								margin: -24px 0 0 -18px;
							}
						}

						a {
							display: block;
							overflow: hidden;
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							font-size: 80%;
							padding: 1rem;
							white-space: nowrap;
							text-overflow: ellipsis;
							text-align: center;
							color: inherit;
							text-decoration: none;
						}
					}

					> a {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						top: 0.5rem;
						right: 1.5rem;
						width: 32px;
						height: 32px;
						border-radius: 50%;
						text-decoration: none;
						color: #fff;
						background-color: rgba(0,0,0,.5);
						@media only screen and (max-width:47.99em) {
							width: 20px;
							height: 20px;

							i {
								font-size: 12px;
							}
						}
					}
				}
			}

			&[data-required=true] {
				> div:first-child {
					> div:only-child {
						a {
							display: none;
						}
					}
				}
			}
		}

		&--repeater {
			table {
				&:not(:last-child) {
					margin-bottom: 1rem;
				}

				tr {
					background-color: #fff;

					&.ui-sortable-helper {
						display: table;
					}
					@media only screen and (max-width:47.99em) {
						display: flex;
						flex-direction: column;
						position: relative;
						border: 1px solid rgba(0,0,0,0.1);
						border-radius: 4px;
						padding-top: 0.25rem;
						padding-bottom: 0.25rem;

						&.ui-sortable-helper {
							display: flex;
						}

						&:not(:last-child) {
							margin-bottom: 1rem;
						}
					}
				}

				td {
					vertical-align: middle;

					&:first-child {
						&,
						* {
							cursor: move;
						}
					}

					&:first-child,
					&:last-child {
						width: 1px;
						white-space: nowrap;
						padding-left: 0;
						padding-right: 0;
						color: #888;

						i {
							margin: 0;
						}
					}
					@media only screen and (max-width:47.99em) {
						border-bottom: none;

						&:first-child,
						&:last-child {
							position: absolute;
							right: -.75rem;
						}

						&:first-child {
							top: 0;
						}

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

				tr:only-child td {
					&:last-child a {
						pointer-events: none;
					}
				}
			}
		}

		&__label {
			display: block;
			margin-bottom: 0.5rem;

			small {
				font-size: 1em;
				font-weight: normal;
			}
		}

		&__description {
			font-size: 80%;
			margin-bottom: 0.75rem;
			opacity: 0.75;
		}
	}

	&-modal &-field--attachment-upload {
		> div:first-child {
			> div {
				flex-basis: 33.33333333%;
				max-width: 33.33333333%;
			}
		}
	}
	/*--------------------------------------------------------------
	Modals
	--------------------------------------------------------------*/
	&-modal {
		display: none;
		width: 380px;

		&--mobile {
			@media only screen and (min-width:48em) {
				display: block;
				width: auto;
			}
		}

		&__title {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}

			&:first-child {
				margin-top: 0;
			}
		}
	}
}
/*--------------------------------------------------------------
Flatpickr
--------------------------------------------------------------*/
.flatpickr {
	&-status {
		&::after {
			content: '';
			display: block;
			position: absolute;
			bottom: 2px;
			left: calc(50% - 2px);
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background-color: #ffb900;
		}

		&--success::after {
			background-color: #46b450;
		}

		&--error::after {
			background-color: #dc3232;
		}
	}

	&-day {
		&-label {
			display: none;
			position: absolute;
			z-index: 1000;
			left: calc(50% - 27px);
			bottom: 40px;
			padding: 0.25rem;
			font-size: 0.625rem;
			line-height: 1.5;
			text-align: center;
			background: rgba(0,0,0,0.75);
			color: #fff;
			font-weight: normal;
			border-radius: 2px;
			width: 54px;

			&::after {
				content: '';
				display: block;
				border: 4px solid transparent;
				border-top-color: rgba(0,0,0,0.75);
				position: absolute;
				left: calc(50% - 4px);
				bottom: -8px;
			}
		}

		&:hover &-label {
			display: block;
		}
	}
}
/*--------------------------------------------------------------
Phone
--------------------------------------------------------------*/
.iti {
	display: block;

	&__flag {
		background-image: url("../images/intl-tel-input/flags.png");
		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
			background-image: url("../images/intl-tel-input/flags@2x.png");
		}
	}

	input[type=tel] {
		width: 100%;
	}
}
