/**
 * Frontend Styles
 */
@import "./variables";

.ghostkit-changelog {
	position: relative;
	z-index: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	&::before {
		position: absolute;
		top: var(--gkt-changelog--line__top);
		bottom: 0;
		left: var(--gkt-changelog--line__left);
		z-index: -1;
		display: block;
		width: var(--gkt-changelog--line__width);
		content: "";
		background-color: var(--gkt-changelog--line__background-color);
		border-radius: var(--gkt-changelog--line__border-radius);
		opacity: var(--gkt-changelog--line__opacity);
	}

	// Version.
	&-version {
		min-width: var(--gkt-changelog--version-badge__min-width);
		padding: var(--gkt-changelog--version-badge__padding-v) var(--gkt-changelog--version-badge__padding-h);
		font-weight: var(--gkt-changelog--version-badge__font-weight);
		color: var(--gkt-changelog--version-badge__color);
		text-align: center;
		background-color: var(--gkt-changelog--version-badge__background-color);
		border-radius: var(--gkt-changelog--version-badge__border-radius);
	}

	// Date.
	& .ghostkit-changelog-date {
		margin: 0;
		margin-left: var(--gkt-changelog--date__margin-left);
		font-size: var(--gkt-changelog--date__font-size);
	}

	// More info.
	&-more {
		width: 100%;
		padding-left: calc(var(--gkt-changelog--version-badge__min-width) + var(--gkt-changelog--date__margin-left));
		margin-top: var(--gkt-changelog--content__margin-top);

		@media screen and (max-width: 768px) {
			padding-left: 0;
		}
	}

	.ghostkit-badge {
		min-width: var(--gkt-changelog--content-badges__min-width);
		margin-right: var(--gkt-changelog--content-badges__margin-right);
		font-size: var(--gkt-changelog--content-badges__font-size);
		font-weight: var(--gkt-changelog--content-badges__font-weight);
		text-transform: var(--gkt-changelog--content-badges__text-transform);
	}
}