/*
* Pick-a-Color LESS v1.2.x
* Copyright 2013 Lauren Sperber and Broadstreet Ads
* https://github.com/lauren/pick-a-color/blob/master/LICENSE
*/

@import "bootstrap-src/variables.less"; 
@import "bootstrap-src/mixins.less";

//// variables

// basic colors

@black: #000;
@white: #fff;
@pacRed:hsl(0,100%,50%);
@pacOrange:hsl(24, 100%, 50%);
@pacYellow:hsl(60, 100%, 50%);
@pacGreen:hsl(120, 100%, 25%);
@pacBrightGreen:hsl(120, 100%, 50%);
@pacBlue:hsl(240, 100%, 50%);
@pacTeal:hsl(180, 100%, 50%);
@pacIndigo:hsl(275, 100%, 25%);
@pacViolet:hsl(300, 76%, 72%);
@pacLightPurple:hsl(300, 100%, 50%);
@pacPurple:hsl(300, 100%, 25%);
@pacBwMidpoint:lighten(@black,50%);

// widths

@color-box-width: 200px;
@color-box-width-phone: 160px;
@color-band-width: 11px;
@color-band-width-phone: 21px;
@advanced-color-box-width: 300px;
@advanced-color-box-width-phone: 270px;

@border-radius-base: 4px;
@defaultShadow: inset 0px 0px 2px 2px rgba(0, 0, 0, 0.075);

//// mixins

.borders-shadows (@radius: 4px, @width: 1px, @color: @btn-default-border, @style: solid, @shadow: @defaultShadow) {
  border: @width @style @color;
  border-radius: @radius;
  .box-shadow(@shadow);
}

.tab-borders-shadows (@radius: 4px, @width: 1px, @color: @btn-default-border, @style: solid) {
  border-top:@width @style @color;
  border-right:@width @style @color;
  border-left:@width @style @color;
  .border-top-radius(@radius);
}

.three-color-spectrum (@mid: @pacRed) {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0.0, lighten(@mid,50%)), color-stop(0.5, @mid), color-stop(1.0, darken(@mid,50%)));
  background-image: -moz-linear-gradient(left center, lighten(@mid,50%) 0%, @mid 50%, darken(@mid,50%) 100%);
  background-image: -webkit-linear-gradient(left, lighten(@mid,50%) 0%, @mid 50%, darken(@mid,50%) 100%);
  background-image: -o-linear-gradient(left, lighten(@mid,50%) 0%, @mid 50%, darken(@mid,50%) 100%);
  background-image: linear-gradient(to right, lighten(@mid,50%) 0%, @mid 50%, darken(@mid,50%) 100%);
  background-repeat: repeat-x;
}

.full-spectrum (@one: @pacRed, @two: @pacYellow, @three: @pacBrightGreen, @four: @pacTeal, @five: @pacBlue, @six: @pacLightPurple, @seven: @pacRed) {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @one), color-stop(17%, @two), color-stop(34%,@three), color-stop(51%, @four), color-stop(68%, @five), color-stop(85%, @six), color-stop(100%, @seven));
  background-image: -moz-linear-gradient(left center, @one 0%, @two 17%, @three 24%, @four 51%, @five 68%, @six 85%, @seven 100%);
  background-image: -webkit-linear-gradient(left, @one 0%, @two 17%, @three 24%, @four 51%, @five 68%, @six 85%, @seven 100%);
  background-image: -o-linear-gradient(left, @one 0%, @two 17%, @three 24%, @four 51%, @five 68%, @six 85%, @seven 100%);
  background-image: linear-gradient(to right, @one 0%, @two 17%, @three 24%, @four 51%, @five 68%, @six 85%, @seven 100%);
  background-repeat: repeat-x;
}

.saturation-spectrum (@color: @pacRed) {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0.0, desaturate(@color,100%)), color-stop(0.5, @color), color-stop(1.0, saturate(@color,100%)));
  background-image: -moz-linear-gradient(left center, desaturate(@color,100%) 0%, @color 50%, saturate(@color,100%) 100%);
  background-image: -webkit-linear-gradient(left, desaturate(@color,100%) 0%, @color 50%, saturate(@color,100%) 100%);
  background-image: -o-linear-gradient(left, desaturate(@color,100%) 0%, @color 50%, saturate(@color,100%) 100%);
  background-image: linear-gradient(to right, desaturate(@color,100%) 0%, @color 50%, saturate(@color,100%) 100%);
  background-repeat: repeat-x;
}

// IE spectrums

.spectrum-0(@color) {
  #gradient.horizontal(lighten(@color,50%),@color);
  .border-left-radius(@border-radius-base);
}

.spectrum-1(@color) {
  #gradient.horizontal(@color,darken(@color,50%));
  .border-right-radius(@border-radius-base);
}

.saturation-spectrum-0(@color) {
  #gradient.horizontal(desaturate(@color,100%),desaturate(@color,50%));
  .border-left-radius(@border-radius-base);
  width: @advanced-color-box-width / 2;
  @media screen and (max-width: (@screen-md - 1px)) {
    width:@advanced-color-box-width-phone / 2;
  }
}

.saturation-spectrum-1(@color) {
  #gradient.horizontal(desaturate(@color,50%),@color);
  .border-right-radius(@border-radius-base);
  width: @advanced-color-box-width / 2;
  @media screen and (max-width: (@screen-md - 1px)) {
    width:@advanced-color-box-width-phone / 2;
  }
}

//// actual styles

// input field

.pick-a-color-markup {

	* {
		.box-sizing(border-box);
	}

  .hex-pound {
  	padding-left: 8px;
  	padding-right: 8px;
    @media screen and (max-width: (@screen-md - 1px)) {
      padding:3px 5px 0px 5px;
      min-height:30px;
    }
  }

  .pick-a-color {
  	padding: 5px;
    @media screen and (max-width: (@screen-md - 1px)) {
      width: 100%;
      font-size:@font-size-large;
      padding:9px;
      min-width: 222px;
      height: 47px;
    }
  }

  // button to open picker

  .input-group-btn {
    .color-dropdown {
      padding:6px 5px;
      &.no-hex {
        .border-left-radius(@border-radius-base);
      }
      &:focus {
      	background-color: #fff;
      }
      @media screen and (max-width: (@screen-md - 1px)) {
        height:47px;
      }
    }
  }
  
  .color-preview {
    .borders-shadows;
    height:1.429em;
    width:1.429em;
    display:inline-block;
    cursor:pointer;
    margin-right: 5px;
    &.current-color {
      margin-bottom: -5px;
    }
    @media screen and (max-width: (@screen-md - 1px)) {
      height:1.875em;
      width:1.875em;
    }
  }

  // basic menu of colors

  .color-menu {
    text-align:left;
    padding:5px 0px; /*overwriting bootstrap default */
    width:330px;
    font-size: 14px;
    left: auto;

    &.color-menu--inline {
      left: -285px;
      @media screen and (max-width: (@screen-md - 1px)) {
        left:-242px;
      }
    }

    @media screen and (max-width: (@screen-md - 1px)) {
      left:-242px;
      width:293px;
    }

    &.small {
      width:100px;
      @media screen and (max-width: (@screen-md - 1px)) {
        left:-105px;
      }
    }
    
    &.no-hex {
      left:0px;
    }

    /* resets for ul / li styles */

    ul {
      padding:0px;
      margin:0px;
    }

    li {
      list-style-type:none;
      padding:5px 0px;
      margin:0px;
    }

    .color-preview {
      vertical-align:middle;
      margin:0px;
      @media screen and (max-width: (@screen-md - 1px)) {
      height: 35px;
      width: 35px;
      }

      &.current-color, &.white {
        background-color:@white;
      }

      &.red {
        background-color:@pacRed;
      }

      &.orange {
        background-color:@pacOrange;
      }

      &.yellow {
        background-color:@pacYellow;
      }

      &.green {
        background-color:@pacGreen;
      }

      &.blue {
        background-color:@pacBlue;
      }

      &.indigo {
        background-color:@pacIndigo;
      }

      &.violet {
        background-color:@pacViolet;
      }

      &.purple {
        background-color:@pacPurple;
      }

      &.black {
        background-color:@black;
      }
    }
    .basicColors-content, .savedColors-content {
      li > a {
        padding: 5px 15px 3px 15px;
        cursor: default;
        min-height:25px;
        color: #333;
        &:hover {
        	background-color: #fff;
        }
        @media screen and (max-width: (@screen-md - 1px)) {
          min-height:40px;
        }
      }
      li:hover a {
        color: #333;
        background-image:none;
        filter:none;
        text-decoration: none;
        font-weight: bold;
        @media screen and (max-width: (@screen-md - 1px)) {
          background-color: #fff;
          font-weight: normal;
        }
      }
    }

    .btn.color-select {
      margin: 0px 5px;
      height:20px;
      padding:0px 5px;
      margin-top:0px;
      line-height: 1.5px;
      border-radius: @border-radius-base;
      @media screen and (max-width: (@screen-md - 1px)) {
        height:35px;
      }
    }
  }

  .caret {
  	margin-bottom: 3px;
  }

  .color-menu-instructions, .advanced-instructions {
    text-align: center;
    padding:0px 6px;
    margin:0px;
    @media screen and (min-width: @screen-md) {
      display:none;
    }
    font-size: 14px;
    font-weight:normal;
  }

  .color-label {
    vertical-align:middle;
    margin:0px;
    margin-left:10px;
    cursor:pointer;
    @media screen and (max-width: (@screen-md - 1px)) {
    margin-left:8px;
    }
  }

  // color gradients

  .color-box {
    height:20px;
    width:@color-box-width;
    position:absolute;
    left:115px;
    .borders-shadows;
    cursor:pointer;
    @media screen and (max-width: (@screen-md - 1px)) {
      width:@color-box-width-phone;
      height:35px;
    }
  }

  .black .highlight-band-stripe {
    background-color:@white;
  }

  .spectrum-white {
    #gradient.horizontal(@white,@pacBwMidpoint);
    .highlight-band {
    left:0px;
    }
  }

  .spectrum-red {
    .three-color-spectrum(@pacRed);
  }

  .spectrum-orange {
    .three-color-spectrum(@pacOrange);
  }

  .spectrum-yellow {
    .three-color-spectrum(@pacYellow);
  }

  .spectrum-green {
    .three-color-spectrum(@pacGreen);
  }

  .spectrum-blue {
    .three-color-spectrum(@pacBlue);
  }

  .spectrum-purple {
    .three-color-spectrum(@pacPurple);
  }

  .spectrum-black {
    #gradient.horizontal(@black,@pacBwMidpoint);
    .highlight-band {
      left:0px;
      border: 1px solid @pacBwMidpoint;
    }
  }

  // IE spectrums

  .ie-spectrum {
    height:20px;
    width:@color-box-width/2;
    display:inline-block;
    &.hue {
      width:(@advanced-color-box-width/6) + .5px;
      @media screen and (max-width: (@screen-md - 1px)) {
        width: (@advanced-color-box-width-phone/6) + .5px;
      }
    }
    @media screen and (max-width: (@screen-md - 1px)) {
      width:@color-box-width-phone/2;
      height:35px;
    }
    top:-1;
  }

  .red-spectrum-0, .lightness-spectrum-0 {
    .spectrum-0(@pacRed);
  }

  .red-spectrum-1, .lightness-spectrum-1 {
    .spectrum-1(@pacRed);
  }

  .lightness-spectrum-0, .lightness-spectrum-1 {
    width: @advanced-color-box-width / 2;
    @media screen and (max-width: (@screen-md - 1px)) {
      width: @advanced-color-box-width-phone / 2;
    }
  }

  .orange-spectrum-0 {
    .spectrum-0(@pacOrange);
  }

  .orange-spectrum-1 {
    .spectrum-1(@pacOrange);
  }

  .yellow-spectrum-0 {
    .spectrum-0(@pacYellow);
  }

  .yellow-spectrum-1 {
    .spectrum-1(@pacYellow);
  }

  .green-spectrum-0 {
    .spectrum-0(@pacGreen);
  }

  .green-spectrum-1 {
    .spectrum-1(@pacGreen);
  }

  .blue-spectrum-0 {
    .spectrum-0(@pacBlue);
  }

  .blue-spectrum-1 {
    .spectrum-1(@pacBlue);
  }

  .purple-spectrum-0 {
    .spectrum-0(@pacPurple);
  }

  .purple-spectrum-1 {
    .spectrum-1(@pacPurple);
  }

  .saturation-spectrum-0 {
    .saturation-spectrum-0(@pacRed);
  }

  .saturation-spectrum-1 {
    .saturation-spectrum-1(@pacRed);
  }

  .hue-spectrum-0 {
    #gradient.horizontal(@pacRed,@pacYellow);
  }

  .hue-spectrum-1 {
    #gradient.horizontal(@pacYellow,@pacBrightGreen);
  }

  .hue-spectrum-2 {
    #gradient.horizontal(@pacBrightGreen,@pacTeal);
    left:-1px;
    position:relative;
  }

  .hue-spectrum-3 {
    #gradient.horizontal(@pacTeal,@pacBlue);
    left:-1px;
    position:relative;
  }

  .hue-spectrum-4 {
    #gradient.horizontal(@pacBlue,@pacLightPurple);
    left:-1px;
    position:relative;
  }

  .hue-spectrum-5 {
    #gradient.horizontal(@pacLightPurple,@pacRed);
    left:-2px;
    position:relative;
  }

  // highlight band

  .highlight-band {
    .borders-shadows(2px,1px,@gray-darker,solid, 1px 1px 1px #333);
    height:19px;
    width:@color-band-width;
    display:inline-block;
    cursor:pointer;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    position:absolute;
    top:-1px;
    left:(@color-box-width/2) - (@color-band-width/2);
    text-align:center;
    @media screen and (max-width: (@screen-md - 1px)) {
      width:@color-band-width-phone;
      left:(@color-box-width-phone/2) - (@color-band-width-phone/2);
      height:34px;
    }
  }

  .highlight-band-stripe {
    min-height: 80%;
    min-width: 1px;
    background-color:@black;
    opacity: 0.40;
    margin: 2px 1px;
    display:inline-block;
    .box-shadow(1px 0px 2px 0px #ffffff);
    @media screen and (max-width: (@screen-md - 1px)) {
      margin: 4px 2px;
    }
  }

  // tabbed navigation

  .color-menu-tabs {
    padding:5px 3px 3px 10px;
    font-size: 12px;
    color: #333;
    border-bottom:1px solid @btn-default-border;
    margin-bottom:5px;
    .tab {
      padding:4px 5px;
      margin:5px;
      border-left:1px solid #fff;
      border-right:1px solid #fff;
      cursor:pointer;
      background-color:#fff;
      &:hover {
        padding-bottom: 6px;
        .tab-borders-shadows;
      }
    }
    a {
      color: #333;
      text-decoration:none;
    }
    .tab-active {
      border-bottom:3px solid #fff;
      padding-bottom: 5px;
      .tab-borders-shadows;
    }
  }

  .active-content {
    display: block;
  }

  .inactive-content {
    display:none;
  }

  // saved colors tab

  .savedColors-content {
    padding:5px 15px;
    white-space:normal;
    li.color-item > a {
    margin-left:7px;
    padding-left:8px;
    border-radius: @border-radius-base;
    }
  }

  .saved-color-col {
    position:relative;
    left:-15px;
    float:left;
    width:149px;
    @media screen and (max-width: (@screen-md - 1px)) {
      width:130px;
    }
  }

  // advanced colors

  .advanced-content {
    ul {
      margin-top:10px;
    }
    li {
      padding: 5px 15px 3px 15px;
      cursor: default;
      min-height:25px;
      height:50px;
      position:relative;
      @media screen and (max-width: (@screen-md - 1px)) {
        min-height:70px;
      }
    }
    .color-preview {
      height:50px;
      width: @advanced-color-box-width;
      float:left;
      margin:0px 0px 10px 0px;
      background-color: @pacRed;
      text-align:center;
      .color-select.btn.advanced {
        margin-top:15px;
        display:none;
        @media screen and (max-width:(@screen-md - 1px)) {
          display:inline;
          margin-top:7px;
        }
      }
      &:hover .color-select.btn.advanced {
        display:inline;
      }
      @media screen and (max-width:(@screen-md - 1px)) {
        width:@advanced-color-box-width-phone;
        margin-left:-10px;
      }
    }

    .spectrum-hue {
      .full-spectrum;
      .highlight-band {
        left:0px;
      }
    }

    .spectrum-lightness {
      .three-color-spectrum(@pacRed);
    }

    .spectrum-saturation {
      .saturation-spectrum;
      .highlight-band {
        left:@advanced-color-box-width - (@color-band-width + 2);
        @media screen and (max-width: (@screen-md - 1px)) {
          left:@advanced-color-box-width-phone - (@color-band-width-phone + 2);
        }
      }
    }

    .spectrum-lightness .highlight-band {
      left: (@advanced-color-box-width / 2) - ((@color-band-width + 2) / 2);
      @media screen and (max-width: (@screen-md - 1px)) {
        left: (@advanced-color-box-width-phone / 2) - ((@color-band-width-phone + 2) / 2);
      }
    }

    .lightness-text, .hue-text, .saturation-text, .preview-text {
      vertical-align:middle;
      text-align:center;
      display:block;
    }

    .color-box {
      left:15px;
      top:25px;
      width:@advanced-color-box-width;
      @media screen and (max-width: (@screen-md - 1px)) {
        width:@advanced-color-box-width-phone;
        left:10px;
      }
    }

    .preview-item {
      height:80px;
    }

  }
}

@-moz-document url-prefix() {
	@media screen and (max-width: (@screen-md - 1px)) {
	  div.pick-a-color-markup .color-menu {
	  	left: 0px;
		}
	}
}