@import '@woocommerce/experimental/build-style/style.css';
.woocommerce-inbox-message__wrapper {
	.woocommerce-inbox-message__content {
		padding-bottom: 24px;
	}
	.woocommerce-inbox-message__actions {
		padding-top: 16px;
	}
}

// Adapted from woocommerce-admin:client/homescreen/style.scss
.wcpay-task-list.woocommerce-experimental-list {
	position: relative;

	.woocommerce-experimental-list__item {
		position: relative;
	}

	.woocommerce-task-list__item[data-key^='dispute-resolution-task'] {
		// Hide the dispute resolution task tooltip / popover as it is irrelevant.
		.components-popover {
			display: none;
		}

		// Style non-urgent dispute tasks as yellow, keeping the level-1 exclamation icon.
		&:not( [data-urgent='true'] ) {
			.gridicons-notice-outline {
				fill: #f0b849;
			}
			&::before {
				background-color: #f0b849;
			}
		}
	}
}

.wcpay-overview {
	> .components-notice {
		margin: 24px 0;
	}

	.wcpay-connection-success {
		position: relative;
		text-align: center;
		padding: $gap-large;

		&__dropdown {
			position: absolute;
			top: $gap-large;
			right: $gap-large;

			.dashicons-ellipsis {
				transform: rotate( 90deg );
			}
		}

		.dashicons-button {
			margin-right: 0;
			display: none !important;
		}

		img {
			max-height: 73px;
			max-width: 100%;
		}

		h2 {
			font-size: 20px;
			font-weight: 400;
			letter-spacing: 0.7px;
			line-height: 28px;
			margin-bottom: $gap-small;

			@media ( min-width: 783px ) {
				padding: 0 10%;
			}
		}

		p {
			color: $gray-700;
		}
	}

	// Gutenberg compatibility adjustments. The component changed its classes and
	// styling in @wordpress/components 19.11.0. We're currently using 11.1.5.
	// To be removed when we upgrade this package.
	.components-popover {
		position: fixed;
	}

	.wcpay-setup-real-payments {
		&__body {
			display: grid;
			grid-template-columns: repeat( 3, 1fr );
			grid-column-gap: $gap-largest;
			margin: $gap $gap-small;
			text-align: center;
			fill: $studio-woocommerce-purple-50;

			@media ( max-width: 783px ) {
				grid-template-columns: 1fr;
			}

			svg {
				display: block;
				margin: 0 auto $gap-smaller;
			}
		}

		&__footer {
			justify-content: end;
		}
	}
}
