svg {
	width: 20px;
	height: 20px;
	fill: #ffffff;
}

i {
	font-style: normal;
	display: flex;
}

.color-picker-item {
	font-size: 14px;
	color: white;
	display: flex;
	align-items: center;
	padding: 3px 8px;

	input:disabled + label {
		opacity: .4;
		cursor: default;
	}

	label {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		cursor: pointer;
		font-size: 14px;

		*:not(:last-child) {
			margin-right: 10px;
		}

		div.text {
			flex: 1;
			font-size: 14px;
			text-align: right;
		}

		div.color {
			width: 10px;
			height: 10px;
			box-shadow: 0 0 1px 1px #297f9b;
		}
	}

	button.no-fill {
		border: none;
		background: transparent;
		color: white;
		font-size: 20px;
		padding-right: 5px;
		box-sizing: border-box;
		opacity: .9;
		outline: none;

		&.disabled {
			opacity: .5;
			cursor: unset;
		}

		&:hover:not(.active):not(.disabled) {
			opacity: 1;
		}
	}

	input {
		display: block;
		visibility: hidden;
		width: 0;
		height: 0;
		padding: 0;
		margin: 0;
		border: none;
	}

	/deep/ .color-picker {
		transition: transform 0.2s;
	}
}
