@import '../../stylesheets/_variables.scss';

.woocommerce-marketplace {
	&__notice {
		align-items: center;
		border: 1px solid #f0f0f0;
		box-shadow: 0 2px 6px 0 #0000000d;
		display: flex;
		gap: 12px;
		margin-bottom: 32px;
		opacity: 1;
		padding: 12px;
		transition: opacity 1s ease-out;

		&--info {
			border-left: 4px solid var(--wp-admin-theme-color, #007cba);
		}

		&--error {
			border-left: 4px solid $alert-red;
		}

		&--warning {
			border-left: 4px solid $alert-yellow;
		}

		&--success {
			border-left: 4px solid $valid-green;
		}

		&-icon {
			align-self: flex-start;
			height: 24px;

			&--info {
				fill: var(--wp-admin-theme-color, #007cba);
			}

			&--error {
				fill: $alert-red;
			}

			&--warning {
				fill: $alert-yellow;
			}

			&--success {
				fill: $valid-green;
			}
		}

		&-content {
			align-items: flex-start;
			display: flex;
			flex-direction: column;
			flex: 1;
			gap: 12px;
		}

		&-description {
			color: $gray-900;
			font-size: 13px;
			font-weight: 400;
			line-height: 20px;
			margin: 0;
		}

		&-children {
			color: $gray-900;
			font-size: 13px;
			font-weight: 400;
			gap: 8px;
			line-height: 20px;
			margin: 0;

			.components-button {
				margin-right: 12px;
			}
		}

		&-close {
			align-self: flex-start;
			background: none;
			border: none;
			cursor: pointer;
			height: 24px;
		}
	}
}

@media only screen and (min-width: 600px) {
	.woocommerce-marketplace__notice {
		margin-bottom: 40px;
	}
}