@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; }

	.bg { border-radius: 8px; filter: blur(10px); }
	.bg-orange { background: var(--color-orange) !important; user-select: none !important; }
	.bg-red { background: var(--color-red) !important; }
	.bg-pink { background: var(--color-pink) !important; }
	.bg-purple { background: var(--color-purple) !important; }
	.bg-blue { background: var(--color-blue) !important; }
	.bg-ice { background: var(--color-ice) !important; }
	.bg-lime { background: var(--color-lime) !important; }

	.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;
		right: -32px; top: 50%; margin: -10px 0px 0px 0px; cursor: default;
	}
	.icon.see { background-image: url('~img/icon/keyphrase/see0.svg'); }
	.icon.see:hover { background-image: url('~img/icon/keyphrase/see1.svg'); }
	.icon.hide { background-image: url('~img/icon/keyphrase/hide0.svg'); }
	.icon.hide:hover { background-image: url('~img/icon/keyphrase/hide1.svg'); }
	.icon.copy { background-image: url('~img/icon/menu/action/copy0.svg'); display: none; }
}
.phraseWrapper.isReadonly {
	#entry { display: none; }
}
.phraseWrapper.hasError { background: #240e07; }