@import "compass/utilities/general/clearfix";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
//
@import "../../mixins/paddingbox";
@import "../../mixins/devices";
@import "../../mixins/user-select";
@import "../../mixins/x1x2";
@import "../../declarations/colors";

ul.color_select {
  @include paddingbox(308px, 30px, 0, 0, 0, 0);
  @include border-radius(0px 0px 4px 4px);
  @include clearfix;

  margin-left: 2px;
  text-align: justify;

  // DEVICE
  @include desktopClient {
    @include paddingbox(616px, 30px, 0, 0, 0, 0);
  }
  @include iPodWebappPortrait {
    @include paddingbox(308px, 30px, 0, 0, 0, 0);
    margin-left: 3px;
  }

  @include iPodSafariPortrait {
    @include paddingbox(308px, 30px, 0, 0, 0, 0);

    margin-left: 3px;
  }

  @include iPodSafariLandscapeFullscrren {
    @include paddingbox(470px, 30px, 0, 0, 0, 0);

    margin-left: 3px;
  }

  @include iPodWebappLandscape {
    @include paddingbox(470px, 30px, 0, 0, 0, 0);

    margin-left: 3px;
  }

  @include iPodSafariLandscape {
    @include paddingbox(470px, 30px, 0, 0, 0, 0);

    margin-left: 3px;
  }

  li {
    // @include border-radius(0px 0px 4px 4px);
    @include box-shadow(0px 0px 1px #000 inset);

    width: 11.1%;
    height: 30px;
    display: inline-block;

    a {
      display: block;
      width: 100%;
      height: 100%;

      &:hover {
        @include x1x2(center, '../img/icons/1x/tick-hover.png', '../img/icons/2x/tick-hover.png');
        background-size: 16px 16px;
      }
    }

    a.selected {
      @include x1x2(center, '../img/icons/1x/tick-default.png', '../img/icons/2x/tick-default.png');
      background-size: 16px 16px;
    }
  }

  li.fixline {
    padding-left: 100%;
  }

  li.blue {
    background-color: $blue;
  }

  li.turkis {
    background-color: $turkis;
  }

  li.green {
    background-color: $green;
  }

  li.yellow {
    background-color: $yellow;
  }

  li.orange {
    background-color: $orange;
  }

  li.red {
    background-color: $red;
  }

  li.pink {
    background-color: $pink;
  }

  li.grey {
    background-color: $grey;
  }

  li.white {
    background-color: $white;
  }

}