@import "~scss/_mixins";

.phraseWrapper {
	border-radius: 24px; width: 100%; position: relative; padding: 23px 48px; font-size: var(--font-size-header3); line-height: 38px; text-align: center; 
	letter-spacing: -0.12px;
}
.phraseWrapper {
	.phraseInnerWrapper { word-break: break-word; min-height: 38px; position: relative; z-index: 1; }

	.word { 
		font-size: var(--font-size-header3); line-height: 18px; height: 18px; user-select: text !important; display: inline; margin: 10px; vertical-align: middle;
		white-space: nowrap; text-transform: lowercase;
	}
	.word:empty { margin: 0px; }

	.placeholder { color: var(--color-text-tertiary); top: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; }
	#entry { 
		display: inline; font-size: var(--font-size-header3); line-height: 18px; height: 18px; -webkit-user-modify: read-write-plaintext-only; user-select: text; 
		vertical-align: middle; margin-left: 10px; text-transform: lowercase;
	}

	.icon { 
		height: 20px; width: 20px; vertical-align: top; transition: $transitionAllCommon; position: absolute;
		top: 50%; cursor: default;
	}
	.icon.show { right: 16px; margin: -10px 0px 0px 0px; background-image: url('~img/icon/keyphrase/hide0.svg'); }
	.icon.show:hover { background-image: url('~img/icon/keyphrase/hide1.svg'); }
	.icon.copy { right: -32px; margin: -14px 0px 0px 0px; background-image: url('~img/icon/menu/action/copy0.svg'); display: none; }

	&.isHidden {
		.word { border-radius: 8px; filter: blur(10px); background-color: var(--color-text-primary); }

		.icon.show { background-image: url('~img/icon/keyphrase/see0.svg'); }
		.icon.show:hover { background-image: url('~img/icon/keyphrase/see1.svg'); }
	}

	&.isReadonly {
		#entry { display: none; }
	}
}