@mixin ax-picker() {
  box-sizing: border-box;
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  z-index: $ax6ui-picker-z-index;
  position: absolute;
  left: 0;
  top: 0;
  //overflow: hidden;
}

@mixin picker-variant($text-color, $border-color, $heading-bg-color) {

  @include ax-background($ax6ui-picker-bg);
  border: $ax6ui-picker-inner-border;
  border-color: $border-color;
  border-radius: $ax6ui-picker-border-radius;
  box-shadow: $ax6ui-picker-box-shadow;

  .ax-picker-heading {
    font-weight: 600;
    padding: $ax6ui-picker-heading-padding;
    border-bottom: 1px solid transparent;
    @include border-top-radius($ax6ui-picker-border-radius - 1);

    color: $text-color;
    @include ax-background($heading-bg-color);
    .badge {
      font-size: 0.8em;
      color: $heading-bg-color;
      @include ax-background($text-color);
    }
  }
  .ax-picker-body {
    padding: $ax6ui-picker-body-padding;
    text-align: center;
    .ax-picker-content {
      min-width: 50px;

      .ax-picker-content-box {
        border: $ax6ui-picker-content-border;
        border-color: $ax6ui-picker-content-border-color;
        border-radius: $ax6ui-picker-content-border-radius;
        padding: $ax6ui-picker-content-padding;
        overflow: hidden;
      }
    }
    .ax-picker-buttons {
      padding: $ax6ui-picker-buttons-padding;
      button {
        &:not(:last-child) {
          margin-right: 3px;
        }
      }
    }
  }

  &.direction-top {
    .ax-picker-arrow {
      @include picker-arrow($ax6ui-picker-arrow-size, $ax6ui-picker-arrow-border-width, $border-color, top);
    }
  }
  &.direction-right {
    .ax-picker-arrow {
      @include picker-arrow($ax6ui-picker-arrow-size, $ax6ui-picker-arrow-border-width, $border-color, right);
    }
  }
  &.direction-bottom {
    .ax-picker-arrow {
      @include picker-arrow($ax6ui-picker-arrow-size, $ax6ui-picker-arrow-border-width, $border-color, bottom);
    }
  }
  &.direction-left {
    .ax-picker-arrow {
      @include picker-arrow($ax6ui-picker-arrow-size, $ax6ui-picker-arrow-border-width, $border-color, left);
    }
  }

}

@mixin picker-arrow($arrow-size, $arrow-border-width, $border-color, $arrow-direction) {

  //
  //@debug( nth($ax6ui-picker-inner-border, 3) );
  $arrow-bg: nth($ax6ui-picker-bg, 1);
  $arrow-border-color: $border-color;

  position: absolute;
  width: 0;
  height: 0;

  @if ($arrow-direction == top) {
    left: 50%;
    top: 0;
  } @else if ($arrow-direction == right) {
    right: 0;
    top: 50%;
  } @else if ($arrow-direction == bottom) {
    left: 50%;
    bottom: 0;
  } @else if ($arrow-direction == left) {
    left: 0;
    top: 50%;
  }

  &:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;

    @if ($arrow-direction == top) {
      left: - ($arrow-size);
      top: - ($arrow-size * 2);
      border-left: $arrow-size solid transparent;
      border-right: $arrow-size solid transparent;
      border-bottom: ($arrow-size * 2) solid $arrow-border-color;
    } @else if ($arrow-direction == right) {
      right: - ($arrow-size * 2);
      top: - ($arrow-size);
      border-top: $arrow-size solid transparent;
      border-bottom: $arrow-size solid transparent;
      border-left: ($arrow-size * 2) solid $arrow-border-color;
    } @else if ($arrow-direction == bottom) {
      left: - ($arrow-size);
      bottom: - ($arrow-size * 2);
      border-left: $arrow-size solid transparent;
      border-right: $arrow-size solid transparent;
      border-top: ($arrow-size * 2) solid $arrow-border-color;
    } @else if ($arrow-direction == left) {
      left: - ($arrow-size * 2);
      top: - ($arrow-size);
      border-top: $arrow-size solid transparent;
      border-bottom: $arrow-size solid transparent;
      border-right: ($arrow-size * 2) solid $arrow-border-color;
    }
  }

  &:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;

    @if ($arrow-direction == top) {
      left: - ($arrow-size);
      top: - ($arrow-size * 2) + ($arrow-border-width * 2);
      border-left: ($arrow-size) solid transparent;
      border-right: ($arrow-size) solid transparent;
      border-bottom: ($arrow-size * 2) solid $arrow-bg;
    } @else if ($arrow-direction == right) {
      right: - ($arrow-size * 2) + ($arrow-border-width * 2);
      top: - ($arrow-size);
      border-top: ($arrow-size) solid transparent;
      border-bottom: ($arrow-size) solid transparent;
      border-left: ($arrow-size * 2) solid $arrow-bg;
    } @else if ($arrow-direction == bottom) {
      left: - ($arrow-size);
      bottom: - ($arrow-size * 2) + ($arrow-border-width * 2);
      border-left: ($arrow-size) solid transparent;
      border-right: ($arrow-size) solid transparent;
      border-top: ($arrow-size * 2) solid $arrow-bg;
    } @else if ($arrow-direction == left) {
      left: - ($arrow-size * 2) + ($arrow-border-width * 2);
      top: - ($arrow-size);
      border-top: ($arrow-size) solid transparent;
      border-bottom: ($arrow-size) solid transparent;
      border-right: ($arrow-size * 2) solid $arrow-bg;
    }
  }
}

@include keyframes(ax-picker) {
  0% {
    opacity: 0.0;
    @include transform(translate(0, 0%));
  }
  100% {
    opacity: 1.0;
    @include transform(translate(0, 0));
  }
}

@include keyframes(ax-picker-destroy) {
  from {
    opacity: 1.0;
    @include transform(translate(0, 0));
  }
  to {
    opacity: 0.0;
    @include transform(scale(0.8) translate(0, -10%));
  }
}

// mixins --------------------------------------------- end

[data-ax6ui-picker] {
  @include ax-picker();
  @include perspective(1000);
  @include transform-style(preserve-3d);
  @include animation(ax-picker $ax6ui-picker-easing-time-open $ease-in-cubic forwards);
  @include transform(translateZ(0));
  @include transform-origin(center top);
  /* flip type
  @include backface-visibility(visible);
  @include transform(translateY(0%) rotateX(0deg));
  */

  @include picker-variant($ax6ui-picker-default-text, $ax6ui-picker-default-border-color, $ax6ui-picker-default-heading-bg);

  &.destroy {
    @include animation(ax-picker-destroy $ax6ui-picker-easing-time-close $ease-out-cubic forwards);
  }
  &.direction-top {
    @include transform-origin(center top);
  }
  &.direction-right {
    @include transform-origin(right center);
  }
  &.direction-bottom {
    @include transform-origin(center bottom);
  }
  &.direction-left {
    @include transform-origin(left center);
  }
}

// picker handle

@mixin ax6picker-handle() {
  &[data-ax6picker] {
    .input-group-addon {
      cursor: pointer;

      &:not(:last-child) {
        border-left: 0 none;
        border-right: 0 none;
      }

      &.color-preview {
        padding: 0;
      }
      [data-ax6picker-color="preview"] {
        display: block;
      }
    }
  }
}

.input-group {
  @include ax6picker-handle();
}

.form-group {
  @include ax6picker-handle();
}