@import "./mixins";
@import "./variables";

.lb-confirm {
	.lb-label.lb-confirm-message {
		display: block !important;
		opacity: 1;
	}
}

.lb-confirm-wrapper {
	margin-top: 1em;
	position: relative;

	&:last-of-type {
		margin-bottom: 2em;
	}
}

.lb-confirm-button {
	@include inherit-color-to-children;

	padding: 0 2em !important;
	text-decoration: none;
	line-height: 1.3rem !important;
	min-height: 2.5rem;
	position: absolute !important;
	right: var(--lb-popup-padding);
	bottom: 0;
	transition-property: all !important;
	transition-duration: 1500ms !important;
	transition-timing-function: ease-in-out !important;

	--color: #{$color-snow};
	--background-color: var(--highlight-color);
	--border-color: transparent;
	--icon-spacing: .5rem;

	// Label wrapper:
	> div > span {
		display: flex;

		// Label:
		> span {
			align-self: center;
		}

		body.lb-block-page & {
			flex-direction: row-reverse;
		}
	}

	svg {
		--duration: 500ms;

		transition: all var(--duration) ease-in-out;
		margin-left: var(--icon-spacing);
		height: 1.5rem;

		body.lb-block-page & {
			margin-left: 0;
			margin-right: var(--icon-spacing);
		}
	}

	.lb-confirmed & {
		transform: translateX(350px);
	}

	.lb-confirm & {
		bottom: 5.5rem;
	}

	&--done {
		--color: #{$color-success};
		--border-color: #{$color-success};
		--background-color: transparent;

		transition-delay: 400ms;
		transform: translateX(-500px);
		right: unset;

		.lb-confirmed & {
			transform: translateX(0);
		}

		.lb-icon--check {
			opacity: 1;
			visibility: visible;
		}

		.lb-icon--send {
			--delay: 200ms;

			transition:
				opacity var(--duration) ease-in-out,
				visibility var(--duration) ease-in-out var(--delay),
				width var(--duration) ease-in-out var(--delay),
				transform var(--duration) ease-in-out;
			opacity: 0;
			visibility: hidden;
			width: 0;
			transform: translateX(100%);
		}
	}

	body.lb-block-page &,
	body.lb-retweets-page & {
		margin-top: 3rem;
	}

	body.many & {
		padding: 0 1.3em !important;
	}
}
