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

.use-my-domain {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 36px 24px;
	background-color: inherit;
	& .card, &.card {
		box-shadow: none;
	}

	&.card {
		display: flex; // NOTE: To increase specificity
	}

	& &__page-heading {
		.formatted-header__title {
			font-size: 2.25rem;
			@include break-xlarge {
				font-size: 2.75rem;
			}
		}
	}

	& &__domain-illustration {
		margin-bottom: 36px;
	}

	& &__domain-input-fieldset {
		position: relative;
		margin: 0 0 20px;
		flex-grow: 1;

		@include break-mobile {
			margin: 0;
		}
		.use-my-domain__domain-input-note {
			color: #8c8f94;
		}

		button.use-my-domain__domain-input-clear {
			position: absolute;
			right: 10px;
			top: 1px;

			.gridicon.use-my-domain__domain-input-clear-icon {
				fill: var(--studio-gray-50);
				width: 18px;
				height: 18px;
			}
		}

		.action-button {
			color: var(--color-link);
			cursor: pointer;

			&.set-as-primary {
				display: contents;
			}
		}
	}

	& &__domain-input {
		display: flex;
		flex-direction: column;
		row-gap: 8px;
		width: 100%;
		max-width: 370px;

		.form-text-input {
			padding: 9px 28px 9px 10px;
			margin-bottom: 9px;

			text-overflow: ellipsis;
			overflow: hidden;

			&::placeholder {
				color: #c3c4c7;
			}
		}

		&-button {
			flex-grow: 0;
			height: fit-content;
			width: 100%;
			margin-right: 0;
			margin-top: 5px;
			padding: 8px 31px;

			@include break-mobile {
				margin-left: 0;
				width: initial;
			}
		}
	}

	& &__domain-input-note {
		font-size: $font-body-extra-small;
		line-height: 1.2;
		margin: 0 0 14px;
		display: flex;
		align-items: center;

		&-icon {
			margin-right: 4px !important;

			path {
				fill: var(--color-text);
			}
		}
	}

	a, a:visited {
		color: var(--color-accent);
	}
}

button.action_buttons__button.action-buttons__back.use-my-domain__go-back {
	@include break-mobile {
		margin: 0 0 18px;
	}

	margin: 16px 0 0 16px;
	text-decoration: none;
}
