@import "./rs-variables";
@import "./rs-functions";

@mixin rs-floating-label-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
  @keyframes rs-form-label-shake-float-above-#{$modifier} {
    0% {
      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
    }

    33% {
      animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
      transform: translateX(calc(4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
    }

    66% {
      animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
      transform: translateX(calc(-4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
    }

    100% {
      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
    }
  }
}

@mixin rs-floating-label-animation {
  @include rs-floating-label-shake-keyframes(standard, $rs-floating-label-position-y);
}

@mixin rs-floating-label_($color: $rs-floating-label-color) {
  @include rs-typography(subtitle1);
  margin: 0;
  padding: 0;
  cursor: text;
  pointer-events: none;
  position: absolute;
  left: 16px;
  right: auto;
  transform-origin: left top;
  transition:
    transform $rs-floating-label-transition-duration $rs-animation-standard-curve-timing-function,
    color $rs-floating-label-transition-duration $rs-animation-standard-curve-timing-function;
  line-height: 1.15rem;
  text-align: left;
  overflow: hidden;
  will-change: transform;

  color: $color;
  top: 18px;

  &:-webkit-autofill {
    transform: translateY(-50%) scale(.75);
    cursor: auto;
  }

  &[dir="rtl"] {
    right: 0;
    left: auto;
    transform-origin: right top;
    text-align: right;
  }

  &.-shake {
    animation: rs-floating-label-shake-animation(standard);
  }

  &.-outlined {
    left: 16px;
  }

  &.-floatabove {
    cursor: auto;
    transform: rs-floating-label-position($rs-floating-label-position-y);
  
    &.-outlined {
      display: inline-block;
      max-width: 130%;
      top: 2px;
    }
  
    &.-right {
      transform: rs-floating-label-rtl-position($rs-floating-label-position-y);
    }
  
    &.-textarea {
      top: 3px;
      bottom: auto;
    }  
  }
}

@mixin rs-floating-label-icon_ {
  left: 48px;
  top: 18px;
}

@mixin rs-floating-label-icon-dense_ {
  left: 44px;
}


@mixin rs-floating-label-dense_ {
  font-size: .813rem;

  &.-outlined {
    top: 16px;
  }
}

@mixin rs-floating-label-icon-floatabove_ {
  &.-outlined {
    left: 16px;
  }
}

@mixin rs-floating-label-icon-dense-floatabove_ {
  &.-outlined {
    left: 16px;
    top: 4px;
  }
}

@mixin rs-floating-label-dense-floatabove_ {
  transform: rs-floating-label-position($rs-floating-label-dense-label-position-y, 0%, $rs-floating-label-dense-label-scale);

  &.-outlined {
    top: 5px;
  }
}

@mixin rs-floating-label-focused_($color: $rs-floating-label-focused-label-color) {
  color: $color;
}

@mixin rs-floating-label-disabled_($color: $rs-floating-label-disabled-label-color) {
  color: $color;
}

@mixin rs-floating-label-invalid_($color: $rs-floating-label-error) {
  color: $color;

  &::after {
    color: $color;
  }
}

@mixin rs-floating-label-required_ {
  &::after {
    margin-left: 1px;
    content: "*";
  }
}