@import "@automattic/onboarding/styles/mixins";
@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/colors";
@import "@wordpress/base-styles/colors.native";

.dns__form {
	border-top: 1px solid var(--color-neutral-0);
	overflow: visible;
	padding-top: 20px;

	.is-hidden {
		display: none;
	}
}

// make the DNS record type `select` expand to full width of the form
.dns__add-new-select-type {
	width: 100%;
}

body.dns__body-white {
	background: var(--studio-white);
	.sidebar .sidebar__heading::after,
	.sidebar .sidebar__menu-link::after {
		border-right-color: var(--studio-white);
	}
}

.dns-records {
	.dns__details {
		color: var(--studio-gray-50);
		font-size: $font-body-small;
		margin: 4px 16px;
		@include break-small {
			margin: 0;
		}
	}

	.dns-records-list-header {
		margin-top: 24px;
	}

	.dns-records-list {
		margin: 24px 0 0;

		.dns-records-list-item__wrapper {
			color: $gray-50;
			border-top: 1px solid $gray-5;
			border-bottom: none;
			font-size: $font-body-small;
			font-weight: 400;
			padding: 16px 0;

			&:last-of-type {
				border-bottom: 1px solid $gray-5;
			}

			@include break-mobile {
				padding: 16px;
				border-top: none;
				border-bottom: 1px solid $gray-5;
			}

			&.is-header {
				border-bottom: 1px solid $gray-20;
				font-weight: 600;
				display: none;

				@include break-mobile {
					display: block;
				}
			}

			&.is-disabled {
				color: $gray-20;

				& .dns-records-list-item .dns-records-list-item__data.dns-records-list-item__type {
					color: $gray-20;
				}
			}

			.dns-records-list-item {
				margin: 0 16px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				position: relative;

				@include break-mobile {
					margin: 0;
					position: initial;
					justify-content: space-between;
					flex-wrap: nowrap;
				}

				.dns-records-list-item__data {
					align-self: flex-start;
					overflow-wrap: anywhere;

					@include break-mobile {
						align-self: center;
					}

					& + .dns-records-list-item__data {
						@include break-mobile {
							margin-left: 16px;
						}
					}

					&.dns-records-list-item__type {
						overflow-wrap: break-word;

						@include break-mobile {
							flex-basis: 120px;
							flex-grow: 1;
						}
					}

					&.dns-records-list-item__name {
						margin-left: 16px;
						flex-basis: 70%;

						@include break-mobile {
							flex-basis: 240px;
							flex-grow: 1;
						}
					}

					&.dns-records-list-item__value {
						flex-basis: 100%;
						padding-right: 24px;

						@include break-mobile {
							flex-basis: 440px;
							flex-grow: 1;
							padding-right: 0;
						}
					}

					&.dns-records-list-item__menu {
						position: absolute;
						top: -4px;
						right: 0;

						.ellipsis-menu__toggle {
							position: relative;
							padding: 0;
							right: 8px;
						}

						@include break-mobile {
							position: initial;
							min-width: 24px;
							flex-grow: 0;
						}
					}
				}
			}
		}
	}
	.dns-records-notice {
		flex-basis: 100%;
		background-color: var(--studio-gray-0);
		display: flex;
		align-items: center;
		padding: 8px;
		gap: 8px;
		border-radius: 2px;
		margin-top: 24px;

		&__icon.gridicon {
			min-width: 18px;
			fill: var(--studio-orange-40);
		}

		&__message {
			font-weight: 400;
			font-size: $font-body-small;
			color: var(--studio-gray-80);
		}
	}

}

.dns-records-list__action-menu-item.gridicon {
	height: 18px;
	width: 18px;
}

.dns-records-list-item__action-menu-popover {
	.popover__menu-item {
		color: var(--studio-gray-90);

		svg {
			fill: var(--studio-gray-90);
		}

		&:disabled,
		&:disabled:hover,
		&.is-selected:disabled,
		&:focus:disabled {
			color: var(--studio-gray-20);
			svg {
				fill: var(--color-neutral-20);
			}
		}
	}

	.popover__menu-item.is-selected,
	.popover__menu-item:hover,
	.popover__menu-item:focus {
		color: var(--studio-white);
		background-color: var(--color-primary);
		svg {
			fill: var(--studio-white);
		}
	}
}

.domain-connect-info-dialog__message,
.restore-default-a-records-dialog__message {
	@include break-mobile {
		max-width: 600px;
	}
}

a.dns__breadcrumb-button,
button.dns__breadcrumb-button {
	display: flex;
	align-items: center;

	&.add-record,
	&.import-bind-file {
		@include break-mobile {
			svg {
				margin-right: 8px;
			}
		}
	}
	&.add-record.is-icon-button,
	&.import-bind-file.is-icon-button {
		width: 40px;
		display: flex;
		justify-content: center;
	}
	.add-record__icon{
		fill: var(--studio-gray-80);

		@include break-large {
			fill: var(--studio-white);
		}
	}
}

.dns__breadcrumb-button {
	color: var(--color-neutral-80);
	fill: var(--color-neutral-80);
	height: 40px;

	.popover__menu-item[disabled] {
		svg.gridicon {
			fill: var(--color-neutral-20);
		}
	}

	&.is-borderless.ellipsis {
		width: 40px;

		svg.gridicon {
			top: 0;
			margin-top: 0;
			fill: var(--color-neutral-80);
		}
	}
}

.import-bind-file-confirmation-dialog {
	.import-bind-file-confirmation-dialog__header,
	.import-bind-file-confirmation-dialog__row {
		display: flex;
		padding: 8px;
		border-bottom: 1px solid $gray-20;
	}

	.import-bind-file-confirmation-dialog__header label {
		font-weight: 600;
		font-family: $sans;
		font-size: $font-body-small;
	}

	.import-bind-file-confirmation-dialog__row {
		border-bottom: 1px solid $gray-5;

		.components-base-control__field {
			display: flex;
		}

		label {
			font-family: $monospace;
			font-size: $font-body-extra-small;
		}

		&.not-selected label {
			color: $gray-20;
		}
	}
}
