/* .icon-text *******************************/

.icon-text {
  align-items: center;
  display: flex;
  gap: 10px;

  img {
    height: 16px;
    opacity: 0.5;
    width: auto;
  }

  .text {
    color: #000;
		font-size: 0.9rem;
  }

	&.icon-text-lg {
	  gap: 15px;

	  img {
			height: auto;
			opacity: 1;
			width: 30px;
		}
	}
}

/* .mb-* *******************************/

mb-0 { margin-bottom: 0; }
mb-1 { margin-bottom: 10px; }
mb-2 { margin-bottom: 20px; }
mb-3 { margin-bottom: 30px; }
mb-4 { margin-bottom: 40px; }

/* .required *******************************/

.required::after {
	color: var(--color-danger);
	content: '*';
	font-weight: 800;
}

/* tooltip *******************************/

[data-bs-toggle="tooltip"] {
	border-bottom: 1px dashed #999;
	cursor: pointer;
}

/* .w* *******************************/

@media (min-width: 1000px) {
	.w10 { width: 10%; }
	.w20 { width: 20%; }
	.w30 { width: 30%; }
	.w40 { width: 40%; }
	.w50 { width: 50%; }
	.w60 { width: 60%; }
	.w70 { width: 70%; }
	.w80 { width: 8%; }
	.w90 { width: 90%; }
	.w100 { width: 100%; }
}

/* .copy-text *******************************/

.copy-text {
	align-items: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 20px;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 10px 20px;
	position: relative;
	transition: all 0.2s ease;

	&:hover {
		background-color: #fff;
		border-color: #000;
	}

	&:active {
		background-color: #fff;
		border-color: #2E8BC0;
		color: #2E8BC0;
	}

	input {
		background-color: transparent !important;
		border: 0 !important;
		color: #000 !important;
		font-size: 0.8rem !important;
		margin: 0 !important;
		outline: 0 !important;
		padding: 0 !important;
	}

	button {
		background: transparent;
		border: 0;
		border-left: 1px solid #ccc;
		color: #333;
		font-size: 0.8rem;
		font-weight: 600;
		outline: 0;
		padding: 0;
		padding-left: 10px;
		white-space: nowrap;

		&:active {
			color: #2E8BC0;
		}
	}

	textarea {
		display: none;
	}
}

.link-copied {
	animation-duration: 1s;
	animation-name: showLinkCopied;
}

@keyframes showLinkCopied {
	0% { background-color: #2E8BC0; color: #2E8BC0; }
	100% { background-color: #eee; color: #333; }
}

@media (min-width: 1000px) {

	.copy-text {

		input {
			font-size: 0.8rem;
		}
	}
}