/* ------------------------------------------------------------ *\
	Field - Color Picker
\* ------------------------------------------------------------ */

.carbon-color .carbon-color-button { display: inline-block; vertical-align: top; padding: 0; }
.carbon-color .carbon-color-clear-button { margin-left: 5px; padding: 0 5px; }
.carbon-color .carbon-color-clear-button span { line-height: 26px; }
.carbon-color .carbon-color-button-text { padding: 0 10px; }

.carbon-color .carbon-color-preview-holder { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg=="); background-repeat: repeat; display: inline-block; }

.carbon-color .carbon-color-preview { display: inline-block; vertical-align: top; width: 28px; height: 26px;  border-radius: 3px 0 0 3px; border-right: 1px solid $color-border-darker; }

.carbon-color input.carbon-color-field { display: inline-block; vertical-align: top; width: 80px; opacity: 0; transition: background-color .5s ease; }
.carbon-color input.carbon-color-field.error { background-color: #e74444; }

.carbon-color .has-color + input.carbon-color-field { opacity: 1; }

/*  Right-to-Left  */

.rtl .carbon-color .carbon-color-preview { border-radius: 0 3px 3px 0; border-right: 0; border-left: 1px solid $color-border-darker; }

@media (max-width: 782px) {
	.carbon-color .carbon-color-button,
	.carbon-color .carbon-color-button span { height: 39px; line-height: 37px; }
	.carbon-color span.carbon-color-preview-holder { height: 37px; }
	.carbon-container .carbon-field .carbon-color .carbon-color-button .carbon-color-preview { width: 39px; height: 37px; margin: 0 !important; vertical-align: top !important; }
	.carbon-container .carbon-field .carbon-color .carbon-color-button .carbon-color-button-text,
	.carbon-container .carbon-field .carbon-color .carbon-color-clear-button span { margin: 0 !important; vertical-align: top; }
	.carbon-container .carbon-field .carbon-color .carbon-color-clear-button { padding: 0 10px; }
}

