/*
 *  Color palette
 */

.x-dataview {
  &.color {
    .x-dataview-inner.x-scroll-scroller {
      width: auto !important;
      height: auto !important;
      @include border-radius($panel-border-radius);

      .x-dataview-container {
        margin-top: 12px;
        margin-left: 12px;
      }
    }

    .x-dataview-item {
      display: inline-block;

      &.x-item-selected .item-inner{
        @include box-shadow(adjust-hue(saturate($active-color, 100%), -14deg) 0 0 0 4px);
      }

      .item-inner {
        display: inline-block;
        width: 50px;
        height: 50px;
        border: 1px solid lighten($base-color, 5%);
        margin: 6px;
      }
    }
  }
}