@import "@wordpress/base-styles/breakpoints";

.tsp-banner__container {
	background-color: #f6f7f7;
	border-radius: 4px;

	.tsp-banner__content {
		border: 0 none;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;

		.tsp-banner__close {
			cursor: pointer;
			position: absolute;
			top: 24px;
			right: 24px;

			&:focus {
				height: 16px;
				width: 16px;
				border-radius: 4px;
				box-shadow: 0 0 0 2px var(--color-primary);
			}
		}
		.tsp-banner__text-collapsed{
			padding: 24px 64px;

			@media screen and (min-width: $break-huge) {
				padding: 24px;
			}
		}



		.tsp-banner__text {
			display: flex;
			flex-direction: column;
			justify-content: center;
			// Max width by figma minus paddings
			max-width: calc(582px - 42px - 72px);
			padding: 20px 72px 20px 42px;

			.tsp-banner__header {
				font-size: rem(32px);
				line-height: 40px;
			}

			.tsp-banner__description {
				font-size: rem(14px);
				font-weight: 400;
				line-height: 20px;
				padding-bottom: 16px;
				padding-top: 32px;

				a, a:visited {
					color: #50575e;
					text-decoration: underline;

					&:focus {
						box-shadow: 0 0 0 2px var(--color-primary-light);
						color: var(--color-primary);
					}
				}

				a:hover {
					text-decoration: none;
				}
			}

			.tsp-banner__link {
				a, a:visited {
					color: var(--color-accent);
					font-size: rem(14px);
					line-height: 20px;
					font-weight: 500;
				}
			}
		}
	}

	.tsp-banner__image {
		padding-bottom: 42px;
		padding-right: 128px;
	}
}
