/* ------------------------------------------------------------ *\
	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 { display: inline-block; vertical-align: top; width: 28px; height: 100%; background: #fff; border-radius: 3px 0 0 3px; border-right: 1px solid $color-border-darker; }
.carbon-color .carbon-color-preview-empty { background: #fff; position: relative; }
.carbon-color .carbon-color-preview-empty .carbon-color-preview-block { display: block; position: absolute; width: 50%; height: 50%; }
.carbon-color .carbon-color-preview-empty .carbon-color-preview-empty-tl { left: 0; top: 0; background: #ccc; }
.carbon-color .carbon-color-preview-empty .carbon-color-preview-empty-br { right: 0; bottom: 0; background: #ccc; }

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

