.rfw-account-card {
	line-height: variables.$rfw-line-height-smaller;

	&--is-disabled {
		opacity: 0.5;
	}

	&--is-expanded-detail {
		.rfw-account-card__indicator {
			grid-area: 1/3;
		}

		.rfw-account-card__detail {
			grid-area: 2/2/auto/span 2;
		}
	}

	&__styled {
		&--align-top {
			align-self: flex-start;
		}
	}

	&__body-layout {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: start;
	}

	&__icon {
		grid-area: 1/1/span 2;
		margin-right: wpVariables.$grid-unit-20;
		line-height: 0;
	}

	&__subject {
		grid-area: 1/2;
	}

	&__indicator {
		grid-area: 1/3/span 2;
		margin-left: wpVariables.$grid-unit-20;

		&--align-to-detail {
			grid-area: 2/3;
			margin-top: wpVariables.$grid-unit-15;
		}
	}

	&__detail {
		grid-area: 2/2;
		margin-top: wpVariables.$grid-unit-15;
	}

	&__actions {
		grid-area: 3/2/auto/span 2;
		margin-top: wpVariables.$grid-unit-15;
	}

	&__title {
		margin: 0;
		color: wpColors.$black;
	}

	&__description {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1em;
		margin-top: wpVariables.$grid-unit-05;
		color: wpColors.$gray-900;

		> p {
			margin: 0;
		}
	}

	&__helper {
		margin-top: wpVariables.$grid-unit-05;
		font-style: italic;
		font-size: wpVariables.$helptext-font-size;
		color: wpColors.$gray-700;
	}

	.components-card__footer {
		padding: calc(var(--main-gap) / 3 * 2) var(--main-gap);

		// The buttons in card footer usually use the link style in RFW,
		// but the default link style has a smaller size that doesn't meet
		// the visual design needs. So we override its size here.
		> .components-button.is-link {
			min-height: variables.$rfw-size-control-height;
			padding: calc(wpVariables.$grid-unit-15 / 2) wpVariables.$grid-unit-15;
		}
	}

	.components-notice.is-error {
		margin: 0;
		background-color: #f8ebea;
	}

	.components-notice.is-success {
		background-color: #edfaef;
		border: 0;
		font-size: wpVariables.$helptext-font-size;
		margin: 0 var(--large-gap) var(--main-gap);
		padding: wpVariables.$grid-unit-20;
	}

	@media (max-width: wpBreakpoints.$break-small) {
		&__body-layout {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			> div {
				margin: wpVariables.$grid-unit-10;
			}
		}
	}
}