$root: e-kit-library__kit-item;

.#{$root} {
	--e-kit-library-kit-item-overlay-promotion-button-background-color: #{tints(100)};
}

.eps-theme-dark {
	.#{$root} {
		--e-kit-library-kit-item-overlay-promotion-button-background-color: #{dark-tints(600)};
	}
}

.#{$root} {
	&-overlay {
		height: 100%;
	}

	&-overlay-overview-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: white;
		height: 100%;
		width: 100%;

		& > i {
			font-size: 2rem;
			margin-block-end: 5px;
		}

		& > span {
			font-size: 0.9rem;
		}
	}

	&-overlay-promotion-button {
		display: flex;
		width: 100%;
		background: white;
		align-items: center;
		justify-content: center;
		padding: 10px;
		font-size: 13px;
		color: theme-colors( cta );
		background: var(--e-kit-library-kit-item-overlay-promotion-button-background-color);

		& > * {
			margin: 0 3px;
		}
	}

	&-subscription-plan-badge {
		--e-a-color-brand: #467FF7;

		&.promoted {
			--e-a-color-brand: #92003B;
		}

		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		margin: spacing(5);
		background-color: var(--e-a-color-brand);
		color: theme-colors( light );
		text-transform: uppercase;
	}

	&-header {
		position: relative;
	}

	&-actions-menu {
		i {
			font-size: 16px;
		}
	}
	
	&-actions-popover {
		display: flex;
		flex-direction: column;
	    align-items: start;
		min-width: 0;
		padding: 12px 0;
		position: absolute;
		inset-block-start: 25px;
		inset-inline-start: 100%;
		transform: translateX(calc(-100% * var(--direction-multiplier)));

		&-item {
			display: flex;
			height: 30px;
			width: 100%;
			align-items: center;
			gap: 8px;
			padding: 0 12px;
			cursor: pointer;
		
			i {
				font-size: 16px;
			}

			&:hover {
				background-color: var(--e-a-bg-hover);
			}
		
			&--danger {
				color: var(--e-a-color-danger);

				&:hover {
					background-color: var(--e-a-bg-danger);
				}
		
				i {
					color: var(--e-a-color-danger);
				}
			}
		}
	}

	&-cloud-overlay {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&-import-button {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8px 22px;
			gap: 8px;

			& > i {
				font-size: 20px;
				font-weight: 600;
			}

			& > span {
				font-size: 15px;
			}
		}
	}
}

