woocommerce/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss

@import "@wordpress/base-styles/_colors.native.scss";
@import "../../stylesheets/_variables.scss";

@mixin content-width {
	max-width: calc(100vw - (2 * #{$grid-unit-20}));
	@media screen and (min-width: 783px) {
		max-width: calc(100vw - (2 * #{$grid-unit-40}) - $admin-menu-width-collapsed);
	}
	@media screen and (min-width: 960px) {
		max-width: calc(100vw - (2 * #{$grid-unit-40}) - $admin-menu-width);
	}
}

.woocommerce-marketplace__my-subscriptions__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: stretch;
	@include content-width;

	.woocommerce-marketplace__my-subscriptions__header-content,
	.woocommerce-marketplace__my-subscriptions__header-refresh {
		width: 100%;
	}

	.woocommerce-marketplace__my-subscriptions__header-content {
		order: 2;
	}
	.woocommerce-marketplace__my-subscriptions__header-refresh {
		display: flex;
		justify-content: end;
		order: 1;
	}

	@media screen and (min-width: $breakpoint-medium) {
		align-items: center;
		justify-content: space-between;
		flex-direction: row;

		.woocommerce-marketplace__my-subscriptions__header-content,
		.woocommerce-marketplace__my-subscriptions__header-refresh {
			width: auto;
		}

		.woocommerce-marketplace__my-subscriptions__header-content {
			order: 1;
		}
		.woocommerce-marketplace__my-subscriptions__header-refresh {
			order: 2;
		}
	}
}

.woocommerce-marketplace__refresh-subscriptions {
	text-decoration: none;
	color: #007cba;
	.woocommerce-marketplace__refresh-subscriptions-icon {
		margin-right: $grid-unit-05;
	}
}

.woocommerce-marketplace__my-subscriptions__available {
	margin-top: $grid-unit-50;
}

.woocommerce-marketplace__my-subscriptions__heading {
	font-size: 20px;
	color: $gray-900;
	font-weight: 400;
	margin: 0;
	line-height: 28px;
}

.woocommerce-marketplace__notice--error {
	&:last-child {
		margin-bottom: $grid-unit-50;
	}
}

.woocommerce-marketplace__my-subscriptions__table-description {
	font-size: 13px;
	margin: 1em 0;
	line-height: 20px;
	color: $gray-700;

	a {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
	}

	svg {
		fill: #007cba;
		margin-left: 2px;
		width: 16px;
		height: 16px;
	}
}

.woocommerce-marketplace__my-subscriptions__table-wrapper {
	position: relative;
	overflow: hidden;
}

.woocommerce-marketplace__my-subscriptions__table {
	font-size: 13px;
	line-height: 20px;
	margin-top: $grid-unit-30;
	color: $gray-900;
	@include content-width;
}

.woocommerce-marketplace__my-subscriptions__product {
	$product-icon-size: 40px;
	min-width: 400px;

	display: flex;
	align-items: center;

	&-name {
		margin-left: $grid-unit-15;
		line-height: 18px;
		font-weight: 600;
		color: $gray-900;
		text-decoration: none;
	}

	&-icon img {
		border-radius: 4px;
		width: $product-icon-size;
	}

	&-icon {
		width: $product-icon-size;
		height: $product-icon-size;

		svg {
			border-radius: 4px;
			padding: $grid-unit-10;
			fill: $gray-600;
			background-color: $gray-200;
			width: $product-icon-size;
			height: $product-icon-size;
		}
	}
}

.woocommerce-table__item {
	.woocommerce-marketplace__my-subscriptions__product-name {
		&:active,
		&:hover,
		&:visited {
			color: $gray-900;
		}
	}
}

.woocommerce-marketplace__my-subscriptions__product-status {
	display: flex;
	align-items: center;
	border-radius: 2px;
	border: none;
	padding: 2px $grid-unit-10;
	margin-left: $grid-unit-15;
	text-align: left;
	white-space: nowrap;

	&--error {
		color: var(--wp-red-red-70, #8a2424);
		background: var(--wp-red-red-0, #fcf0f1);

		& > svg {
			margin-right: 2px;
			fill: var(--wp-red-red-70, #8a2424);
		}
	}

	&--warning {
		color: var(--wp-yellow-yellow-70, #614200);
		background: var(--wp-yellow-yellow-0, #fcf9e8);

		& > svg {
			margin-right: 2px;
			color: var(--wp-yellow-yellow-70, #614200);
		}
	}
}

.woocommerce-marketplace__my-subscriptions__popover {
	top: -8px !important;
	.components-popover__content {
		border: none;
		width: 300px;
		border-radius: 2px;
		padding: $grid-unit-15;
		color: $gray-900;
		a {
			text-decoration: none;
		}
	}
}

.components-base-control.woocommerce-marketplace__my-subscriptions__activation {
	margin-bottom: 0;
}

.woocommerce-marketplace__my-subscriptions-version {
	padding: 6px 12px;
}
.woocommerce-marketplace__my-subscriptions__table__header--version > span {
	display: inline-block;
	padding: 0 12px;
}

.woocommerce-marketplace__my-subscriptions {
	.woocommerce-table__empty-item,
	.woocommerce-table__header,
	.woocommerce-table__item {
		padding: $grid-unit-10 $grid-unit-30;
		align-items: center;
	}

	.woocommerce-table__table tr:hover {
		background: #f8f9fa;
	}

	.woocommerce-table.is-empty {
		background: none;
		border: 1px solid var(--gutenberg-gray-100, #f0f0f0);
		flex-direction: column;
		gap: $grid-unit-15;
		margin-top: $grid-unit-30;
	}
}

.woocommerce-marketplace__my-subscriptions .components-button {
	&.is-link {
		text-decoration: none;
		padding: 6px 12px;
	}
}

.woocommerce-marketplace__my-subscriptions
.components-button.is-secondary:hover:not(:disabled) {
	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
}

.woocommerce-marketplace__my-subscriptions--connect {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 584px;
	padding: $grid-unit-80 $grid-unit-40;
	margin: 0 auto;

	.woocommerce-marketplace__my-subscriptions__icon {
		width: 104px;
		height: 80px;
		background-image: url(data:image/png;base64,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
	}

	.woocommerce-marketplace__my-subscriptions__header {
		margin-top: $grid-unit-20;
		margin-bottom: $grid-unit-10;
		font-size: $default-font-size;
	}

	.woocommerce-marketplace__my-subscriptions__description {
		text-align: center;
		font-size: $default-font-size;
		line-height: 20px;
		font-weight: 400;
		color: $gray-700;
		margin-top: 0;
		margin-bottom: $grid-unit-30;
		max-width: 520px;
	}
}

.woocommerce-marketplace__my-subscriptions__table__header--actions {
	text-align: right;
	justify-content: flex-end;
}

.woocommerce-marketplace__my-subscriptions__actions {
	display: flex;
	justify-content: end;

	.components-button {
		margin-right: $grid-unit-10;
	}

	a:hover {
		color: #007cba;
	}
}

.woocommerce-marketplace__my-subscriptions__notices {
	.components-notice {
		margin-left: 0;
		margin-right: 0;
		background-color: #fff;
		box-shadow: 0 2px 6px 0 rgba($gray-100, 0.05);
		border: 1px solid var(--gutenberg-gray-100, #f0f0f0);
		padding-right: $grid-unit-15;
		position: relative;

		&::before {
			content: "";
			display: block;
			width: 4px;
			height: 100%;
			background-color: var(--wp-admin-theme-color, #007cba);
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
		}

		&.is-error::before {
			background-color: $alert-red;
		}

		.components-notice__content {
			display: flex;
			align-items: center;
			gap: $grid-unit-15;
		}
		.components-notice__dismiss.has-icon {
			width: 24px;
			min-width: 24px;
			height: 24px;
			align-self: center;
			padding: $grid-unit-05;
			> svg {
				fill: $gray-900;
			}
		}
	}
	.components-notice__action.components-button.is-link {
		margin: 0;
		padding: 0;
	}
}


.woocommerce-marketplace__header-account-modal-overlay {
	.components-modal__header {
		padding-bottom: $grid-unit-20;

		.components-modal__header-heading {
			font-weight: 400;
			font-size: 20px;
			line-height: 28px;
		}
	}
	.components-notice {
		color: $gray-900;
		padding: $grid-unit-15 $grid-unit-20;
		border-left: none;
		margin: $grid-unit-20 0;

		&.is-error {
			background-color: var(--wp-red-red-0, #fcf0f1);
		}

		&.is-warning {
			background-color: var(--wp-yellow-yellow-0, #fcf9e8);
		}

		&.is-error,
		&.is-warning, {
			align-items: start;

			.components-notice__content {
				margin: 0;
			}

			&::before {
				content: "";
				/* stylelint-disable-next-line function-url-quotes */
				background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' stroke='%23614200' stroke-width='1.5'/%3E%3Cpath d='M13 7H11V13H13V7Z' fill='%23614200'/%3E%3Cpath d='M13 15H11V17H13V15Z' fill='%23614200'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				margin-right: $grid-unit-15;
				min-width: 24px;
				height: 24px;
			}
		}
	}

	.components-button-group .components-button {
		&.is-primary {
			box-shadow: none;
		}
		&.is-secondary {
			box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}
	}

	.woocommerce-marketplace__product-card {
		margin: $grid-unit-20 0;
	}
}