@use 'text-macros' as *;
@use 'colors' as *;

.share-popup {
	max-width: 260px;

	.title {
		@extend %popup-title;
	}

	.link-box {
		display: flex;
		min-height: 50px;
		margin-top: 40px;
		background: #FAFAFA;
		border: 1px solid #D4D4D4;
		box-sizing: border-box;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0747566);
		border-radius: 4px;

		cursor: pointer;

		.link {
			width: 260px;

			margin-left: 2px;
			margin-top: 15px;
			margin-bottom: 15px;
			margin-right: 15px;

			font-style: normal;
			font-weight: normal;
			line-height: 20px;
			font-size: 16px;
			letter-spacing: 0.25px;

			color: #1E1E1E;
			text-align: left;
			overflow-x: hidden;
		}

		.copy {
			margin-top: 16px;
			margin-right: 10px;
			margin-bottom: 17px;

			font-style: normal;
			font-weight: 500;
			line-height: normal;
			font-size: 14px;
			text-align: right;
			letter-spacing: 0.21875px;
			text-transform: uppercase;

			color: $pink-button;
		}
	}

	.print {
		margin-top: 40px;

		font-style: normal;
		font-weight: 500;
		line-height: normal;
		font-size: 14px;
		text-align: center;
		letter-spacing: 0.21875px;
		text-transform: uppercase;

		color: $pink-button;
		cursor: pointer;
	}

	.qr {
		margin: auto;
		margin-top: 25px;
	}

	.sharebuttons {
		text-align: center;
		width: 100%;
		margin-top: 20px;

		div {
			display: inline;
			margin: 3px;
			cursor: pointer;
		}
	}
}
