//
// Angular ColorPicker
// --------------------------------------------------

.colorpicker {
  top: 0;
  left: 0;
  z-index: 99999;
  display: none;

  colorpicker-hue,
  colorpicker-alpha,
  colorpicker-saturation {
    position: relative;
  }

  input {
    width: $grid-unit-x * 12;
    font-size: $font-size-small;
    color: $color-black;
    background-color: $color-white;

    @include themes(background-color, input-bg);
    @include themes(color, input-color);
  }

  &.alpha {
    min-width: $grid-unit-x * 17;

    colorpicker-alpha {
      display: block;
    }
  }

  &.dropdown {
    position: absolute;
  }

  &.colorpicker-fixed-position {
    position: fixed;
  }

  .dropdown-menu {
    position: static;
    top: 0;
    left: 0;
    min-width: $grid-unit-x * 16;
    padding: $grid-unit-y;
    margin-top: 0;

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
    }

    &::after {
      clear: both;
      border: $popover-arrow-width solid transparent;
      top: -($popover-arrow-width - 2);
      left: $popover-arrow-width + 2;
    }
  }

  button.close {
    &:before {
      content: none;
    }
  }

  // Visible
  &-visible {
    &,
    & .dropdown-menu {
      display: block !important;
    }
  }

  // Positions
  &-position {
    &-top {
      .dropdown-menu {
        &::after {
          border-bottom: 0;
          top: auto;
          bottom: -($popover-arrow-width - 2);

          @include themes-border-top(dropdown-bg, $popover-arrow-width);
        }
      }
    }

    &-bottom {
      .dropdown-menu {
        &::after {
          border-top: 0;

          @include themes-border-bottom(dropdown-bg, $popover-arrow-width);
        }
      }
    }

    &-right {
      .dropdown-menu {
        &::after {
          border-left: 0;
          top: $popover-arrow-width + 2;
          left: -($popover-arrow-width - 2);

          @include themes-border-right(dropdown-bg, $popover-arrow-width);
        }
      }
    }

    &-left {
      .dropdown-menu {
        &::after {
          border-right: 0;
          top: $popover-arrow-width + 2;
          left: auto;
          right: -($popover-arrow-width - 2);

          @include themes-border-left(dropdown-bg, $popover-arrow-width);
        }
      }
    }
  }
}

colorpicker-saturation {
  display: block;
  width: $grid-unit-x * 12;
  height: $grid-unit-y * 12;
  background-image: url("https://cdn.similie.org/styles/images/colorpicker-saturation.png");
  background-size: contain;
  cursor: crosshair;
  float: left;

  i {
    display: block;
    height: $grid-unit-y;
    width: $grid-unit-x;
    border: 1px solid $color-black;
    border-radius: ceil($grid-unit-y * 0.5);
    position: absolute;
    top: 0;
    left: 0;
    margin: -(ceil($grid-unit-y * 0.5)) 0 0 - (ceil($grid-unit-y * 0.5));

    &::after {
      content: "";
      display: block;
      height: $grid-unit-y - 2;
      width: $grid-unit-x - 2;
      border: 1px solid $color-white;
      border-radius: ceil($grid-unit-y * 0.5);
    }
  }
}

colorpicker-hue,
colorpicker-alpha {
  width: $grid-unit-x * 2;
  height: $grid-unit-y * 12;
  float: left;
  cursor: row-resize;
  margin-left: $grid-unit-y;
  margin-bottom: $grid-unit-y;

  i {
    display: block;
    height: 2px;
    background: $color-black;
    border-top: 1px solid $color-white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: -1px;
  }
}

colorpicker-hue {
  background-image: url("https://cdn.similie.org/styles/images/colorpicker-hue.png");
  background-size: contain;
}

colorpicker-alpha {
  display: none;
}

colorpicker-alpha,
.colorpicker-color {
  background-image: url("https://cdn.similie.org/styles/images/colorpicker-alpha.png");
  background-size: $grid-unit-x 100%;
}

colorpicker-preview {
  display: block;
  height: 10px;
  margin: 5px 0 3px 0;
  clear: both;
  background-position: 0 100%;
}