@import "../vendors/spectrum";

$sp-bg: #FAFAFA;

/* color picker customization*/
.sp-container {
  @extend .with-relief;
  padding: 2px;
  background-color: $sp-bg;
  border: 1px solid greys(20%);
}

.sp-content-container {
  overflow-x: auto;
  overflow-y: hidden;
}

.sp-palette-container {
  padding-right: 5px;
  border: none;
}

.sp-picker-container {
  border: none;
}

.sp-color {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 16%;
}

.sp-hue {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 88%;
  height: 100%;
}

.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
  border-color: greys(40%);
  border-style: 3px solid;
}

.sp-palette .sp-thumb-dark.sp-thumb-active  {
  .sp-thumb-inner {
    background-image: none;
  }
  .iconfont {
    color: white;
  }
}

.sp-palette .sp-thumb-light.sp-thumb-active {
  .sp-thumb-inner {
    background-image: none;
  }
  .iconfont {
    color: #404040;
  }
}

.sp-palette .sp-thumb-active .iconfont {
  position: absolute;
  left: 2px;
  top: 0;
}

.sp-button-container.sp-cf {
  text-align: right;
  background-color: greys(10%);
  border-top: 1px solid greys(20%);
  margin: 0px -2px -2px -2px;
  padding: 3px 3px 3px 3px;
  float:none;
}

.sp-container button.sp-choose, .sp-container button.sp-choose:hover {
  @extend .button;
  @extend .small;
  background-color: color(primary);
  background-image: none;
  border: none;
  color: white;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: $gutter/2;
  padding-right: $gutter/2;
  box-shadow: none;
  transition: none;
  text-shadow: none;
}

.sp-pattern-container {
  
  ul {
    margin-top: 20px;
    margin-bottom: 10px;
    li.sp-pattern-swatch {
      display: inline-block;
      list-style-type: none;
      width: 24px;
      height: 18px;
      margin-right: $gutter; 
    }
  }

  .sp-fieldset {
    border-bottom: 1px solid greys(20%);
    text-align: center;
    overflow-y: visible;
    line-height: 0.1em;
    .sp-fieldset-label {
      padding: 1px 6px 1px 6px;
      background: $sp-bg;
      font-size: 0.9em;
    }
  }

  .sp-pattern-slider {
    @include flow(horizontal, middle, airy);
    margin: 0px auto 10px auto;
    width: 50%;
    label {
      font-size: 0.85em;
    }
    .offset-slider {
      width: 100px;
      margin-left: 5px;
      margin-top: -1px;
    }
  }
}

