@import "~@alicd/next/variables.scss";
@import "~@alicd/next/lib/form/index.scss";
@import "~@alicd/next/lib/input/index.scss";

@mixin altpos($poses, $selected, $self, $other) {
  $i: index($poses, $selected);
  #{$selected}: $self;
  #{nth($poses, 3 - $i)}: $other;
}

@mixin tooltipV($pos) {
  $i: index(bottom top, $pos);
  $other: nth(bottom top, 3 - $i);
  @include altpos(bottom top, $pos, 0, auto);
  @include altpos(margin-bottom margin-top, margin-#{$pos}, -$s-8, 0);
  &::after {
    @include altpos(bottom top, $pos, 19px, auto);
    transform: rotate(if($pos == top, 45deg, -135deg));
  }
}

@mixin tooltipH($pos) {
  @include altpos(left right, $pos, 0, auto);
  &::after { @include altpos(left right, $pos, $s-2, auto); }
}

.form-tooltip-explain {
  .next-form-item-explain {
    position:absolute;
    display: inline-block;
    padding: $size-base;
    border: 1px solid $color-error-2;
    background: $color-error-1;
    white-space: nowrap;
    z-index: 1;
    &:after {
      position: absolute;
      width: 2 * $size-base;
      height: 2 * $size-base;
      content: ' ';
      border-width: 1px;
      border-style: solid;
      border-color: transparent $color-error-2 $color-error-2 transparent;
      background-color: $color-error-1;
    }
  }

  &.form-tooltip-explain-tl {
    .next-form-item-explain {
      @include tooltipV(top); @include tooltipH(left);
    }
  }
  &.form-tooltip-explain-tr {
    .next-form-item-explain {
      @include tooltipV(top); @include tooltipH(right);
    }
  }
  &.form-tooltip-explain-bl {
    .next-form-item-explain {
      @include tooltipV(bottom); @include tooltipH(left);
    }
  }
  &.form-tooltip-explain-br {
    .next-form-item-explain {
      @include tooltipV(bottom); @include tooltipH(right);
    }
  }

  .form-tooltip-explain-help {
    color: #666666;
    display: block;
  }
}

#{$form-prefix} {
  &-left {
    #{$form-prefix}-item-medium {
      #{$form-prefix}-item-label, #{$form-prefix}-text-align, p {
          line-height: $form-label-m-line-height;
      }
      .#{$css-prefix}radio-group {
          line-height: 24px;
      }
      #{$form-prefix}-item-label {
          font-size: $form-label-m-font-size;
      }
    }
    #{$form-prefix}-item-large {
      #{$form-prefix}-item-label, #{$form-prefix}-text-align, p {
          line-height: $form-label-l-line-height;
      }
      .#{$css-prefix}radio-group {
          line-height: 36px;
      }
      #{$form-prefix}-item-label {
          font-size: $form-label-l-font-size;
      }
    }
    #{$form-prefix}-item-small {
      #{$form-prefix}-item-label, #{$form-prefix}-text-align, p {
          line-height: $form-label-s-line-height;
      }
      #{$form-prefix}-item-label {
          font-size: $form-label-s-font-size;
      }
    }
  }
}