@component OpalEditableText {
	display: block;
	cursor: text;

	@el contentWrapper {
		position: relative;
		display: inline-block;
		padding-right: 24px;
	}
		@el contentSlot {
			display: inline-block;
			padding-right: 2px;

			&:focus {
				outline: solid 1px #000;
			}
		}

		@el iconEdit {
			position: absolute;
			top: 0;
			right: 0;
			display: block;
			width: 16px;
			height: 16px;
			border: solid 2px transparent;
			border-left-width: 6px;
			color: hsl(208,86%,46%);
			cursor: pointer;

			&:hover,
			&:active {
				stroke: hsl(208,100%,60%);
			}

			&:active {
				top: 1px;
			}
		}
}