// ----------------------------------------------------------------------------
// COLOR PICKER
// ----------------------------------------------------------------------------

.colorpicker-widget {
	border-color:     darken($border-color-modal, 10);
	background-color: $border-color-modal;
	border-radius:    2px;
	
	.sp-palette-container {
		border-right-color: darken($border-color-modal, 5);
		max-width:          36px;
	}
	
	.sp-picker-container {
		border-left-color: lighten($border-color-modal, 5);
	}
	
	.sp-palette {
		.sp-thumb-el,
		.sp-thumb-inner {
			border-radius: 2px;
			border:        none;
		}
	}
	
	.sp-slider {
		height:        5px;
		left:          -3px;
		right:         -3px;
		border-radius: 2px;
		background:    $border-color-light;
		border:        none;
	}
	
	.sp-alpha-handle {
		border:        none;
		background:    $border-color-light;
		border-radius: 2px;
	}
	
	.sp-dragger {
		background: transparentize($border-color-light, 0.7);
		width:      6px;
		height:     6px;
	}

	.sp-input {
		background:    $background-light;
		border: 	   1px solid;
		border-radius: 2px;
	}
	
	.sp-choose {
		background:  $primary-color;
		color:       $font-color-light;
		font-size:   12px;
		padding:     7px 12px;
		text-shadow: none;
		border:      none;
		
		&:hover {
			background:  lighten($primary-color, 10);
			text-shadow: none;
			border:      none;
		}
	}
	
	.sp-cancel {
		color: $font-color-light !important;
	}
}