@use "../../styles/variables" as *;

@keyframes wcgs-changelog-scrim-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes wcgs-changelog-scrim-out {

	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes wcgs-changelog-drawer-in {

	from {
		transform: translateX(100%);
	}

	to {
		transform: none;
	}
}

@keyframes wcgs-changelog-drawer-out {

	from {
		transform: none;
	}

	to {
		transform: translateX(100%);
	}
}

// Changelog drawer, opened from the header's version badge. It sits below
// the admin bar, which stays above it (z-index 99999).
.wcgs-changelog-drawer {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 32px) 0 0;
	z-index: 99980;
	color: $wcgs-text;
	-webkit-font-smoothing: antialiased;

	&__scrim {
		position: absolute;
		inset: 0;
		background: rgba(16, 17, 20, 0.32);
		animation: wcgs-changelog-scrim-in 200ms ease;
	}

	&__panel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 440px;
		max-width: 100vw;
		background: #fff;
		box-shadow: -16px 0 40px rgba(16, 17, 20, 0.16);
		animation: wcgs-changelog-drawer-in 260ms $wcgs-ease;
	}

	&.is-closing &__scrim {
		animation: wcgs-changelog-scrim-out 220ms ease forwards;
	}

	&.is-closing &__panel {
		animation: wcgs-changelog-drawer-out 220ms $wcgs-ease forwards;
	}

	&__head {
		padding: 16px 22px;
		border-bottom: 1px solid $wcgs-line;
	}

	&__title {
		font-size: 17px;
		font-weight: 600;
	}

	&__close {

		@include wcgs-reset-button;
		width: 32px;
		height: 32px;
		border-radius: 6px;
		color: $wcgs-muted;

		&:hover {
			background: $wcgs-bg-subtle;
			color: $wcgs-text;
		}
	}

	&__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding: 20px 22px 28px;
		font-size: 14px;
		line-height: 1.6;
		color: $wcgs-text-2;
	}

	&__state {
		padding: 40px 0;
		text-align: center;
		color: $wcgs-muted;

		p {
			margin: 0;
		}

		a {
			color: $wcgs-accent;
		}
	}

	// The store's changelog HTML: a "Version x - date" paragraph followed by
	// a list, per release.
	&__content {

		> p {
			margin: 22px 0 8px;
			font-size: 15px;
			color: $wcgs-text;

			&:first-child {
				margin-top: 0;
			}
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin: 22px 0 8px;
			font-size: 15px;
			font-weight: 600;
			color: $wcgs-text;
		}

		ul,
		ol {
			margin: 0 0 8px;
			padding-left: 20px;
		}

		li {
			list-style: disc;
			margin-bottom: 6px;
		}

		a {
			color: $wcgs-accent;
		}

		code {
			padding: 1px 5px;
			border-radius: 4px;
			background: $wcgs-bg-soft;
			font-size: 13px;
		}

		img {
			max-width: 100%;
			height: auto;
		}
	}
}