.#{$prefix}color-picker {
    width: ($colorpicker-item-width * $colorpicker-columns) + horizontal($colorpicker-border-width);
    height: ($colorpicker-item-height * $colorpicker-rows) + vertical($colorpicker-border-width);
    background-color: $colorpicker-background-color;
    border-color: $colorpicker-border-color;
    border-width: $colorpicker-border-width;
    border-style: $colorpicker-border-style;
}

.#{$prefix}color-picker-item {
    width: $colorpicker-item-width;
    height: $colorpicker-item-height;
    border-width: $colorpicker-item-border-width; 
    border-color: $colorpicker-item-border-color;
    border-style: $colorpicker-item-border-style;
    background-color: $colorpicker-item-background-color;
    cursor: $colorpicker-item-cursor;
    padding: $colorpicker-item-padding;
}

// include the element name since :hover causes performance issues in IE7 and 8 otherwise
a.#{$prefix}color-picker-item:hover {
    border-color: $colorpicker-item-border-color-over;
    background-color: $colorpicker-item-background-color-over;
}

.#{$prefix}color-picker-selected {
    border-color: $colorpicker-item-border-color-selected;
    background-color: $colorpicker-item-background-color-selected;
}

.#{$prefix}color-picker-item-inner {
    line-height: $colorpicker-item-height - vertical($colorpicker-item-padding) - vertical($colorpicker-item-border-width) - vertical($colorpicker-item-inner-border-width);
    border-color: $colorpicker-item-inner-border-color;
    border-width: $colorpicker-item-inner-border-width;
    border-style: $colorpicker-item-inner-border-style;
}