@import '../../../styles/_partials/index.scss';
@import '../../../common/styles/themeUtils';

// .TableList and .TableListRow are globally scoped - overriding styles for use in TableLists 
.CopyInput__Container, :global(.TableList .TableListRow) .CopyInput__Container {
	display: flex;
	flex-direction: column;

	.CopyInput__Label {
		@include theme-color-gray-else-gray15;
		line-height: 21px;
		margin-bottom: 10px;
		display: block;
	}
	
	.CopyInput__Message {
		@include theme-color-gray-else-gray15;
		line-height: 21px;
		margin-top: 10px;
		display: block;
		font-weight: 300;
		font-size: $font-size-content-s;
		
		&.__Invalid {
			@include theme-color-red-dark50-else-red;
		}
	}

	.CopyInput {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;

		outline: none;
		border: 1px solid;
		border-radius: 2px;
		@include theme-border-color;
		background-color: inherit;
		
		padding: 4px 42px 4px 10px;
		width: 100%;

		transition: box-shadow .1s, border .1s;
		&:focus-within {
			box-shadow: inset 0 0 0 1px $green;
			border: 1px solid $green;
		}

		&.__Invalid,
		&.__Invalid:focus-within {
			box-shadow: inset 0 0 0 1px $red;
			border: 1px solid $red;
		}

		input.CopyInput__Input {
			line-height: 20px;
			font-weight: 300;
			@include theme-color-gray-else-gray15;
			cursor: text;
			width: 100%;
			border: none;
			outline: none;
			background: transparent;
		}

		> :global(.Tooltip_Target_Container):first-of-type {
			width: 100%;
		}

		&.__Disabled {
			border-color: transparent;

			&:focus-within {
				border-color: transparent;
				box-shadow: none;
			}

			input.CopyInput__Input {
				text-align: right;
			}
		}

		.CopyInput__CopyButton {
			position: absolute;
			right: 10px;
		}
	}
}