/**
 * Components
 */

.newspack-my-account {
	.woocommerce-buttons-card {
		clear: both;
		display: flex;
		flex-wrap: wrap;
		gap: 0.8em;
		margin: var(--newspack-ui-spacer-5) 0;
	}

	.woocommerce-card {
		a {
			align-items: center;
			border: 1px solid var(--newspack-ui-color-border);
			border-radius: 5px;
			display: flex;
			gap: 0.8em;
			padding: 0.8em;
			text-decoration: none;

			&::after {
				background-image: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%23111" /%3E%3C/svg%3E');
				content: "";
				display: block;
				flex: 0 0 24px;
				height: 24px;
				transition: all 125ms ease-in-out;
				width: 24px;
			}

			&:hover {
				border-color: var(--newspack-ui-color-border);

				&::after {
					transform: translateX(0.4em);
				}
			}
		}

		&__content {
			display: flex;
			flex: 1 1 auto;
			flex-wrap: wrap;
			gap: 0.4em;

			span {
				display: block;
				flex: 1 1 100%;
			}
		}

		&__title {
			color: var(--newspack-theme-color-text-main);
			font-size: 1em;
			line-height: 1.6;
			margin: 0;
		}

		&__description {
			color: var(--newspack-theme-color-text-light);
			font-size: 0.8em;
			line-height: 1.2;
		}

		.is-destructive .woocommerce-card__title {
			color: var(--newspack-ui-color-error-50);
		}

		& + .woocommerce-card {
			margin-top: var(--newspack-ui-spacer-4);
		}
	}
}
