@use "../abstracts/variables";

.firevert-promo-time-widget {
	display: block;
	width: 100%;
	background-color: var(--firevert-white);
	font-family: var(--firevert-font-family);
	margin-block: 10px;
	max-width: 450px;
	border-radius: var(--firevert-border-radius-primary);

	&--box-shadow {
		box-shadow: var(--firevert-box-shadow);
	}

	&__container {
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: 13px 15px;

		@media #{variables.$xl} {
			gap: 20px;
		}
	}

	&__top {
		display: flex;
		align-items: center;
		gap: 15px;

		@media #{variables.$xl} {
			gap: 20px;
		}
	}

	&__top-text {
		max-width: 219px;
		font-size: 15px;
		line-height: 20px;

		@media #{variables.$xl} {
			font-size: 16px;
			line-height: 22px;
		}
	}

	&__copy-button {
		display: flex;
		align-items: center;
		gap: 5px;
		margin-left: auto;
		cursor: pointer;
		font-size: 15px;
		line-height: 20px;

		@media #{variables.$xl} {
			font-size: 16px;
			line-height: 22px;
		}
	}

	&__copy-button-text {
		text-decoration: underline;
	}

	&__bottom {
		display: flex;
		align-items: center;
		gap: 5px;

		@media #{variables.$xl} {
			margin-left: 44px;
		}

		& * {
			font-size: 15px;
			line-height: 20px;

			@media #{variables.$xl} {
				font-size: 16px;
				line-height: 22px;
			}
		}
	}

	&__bottom-text-time {
		display: inline-flex;
		padding: 2px 5px;
		border-radius: 3px;
		font-weight: 700;
		width: 80px;
	}
}