@use "sass:math";
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../variables" as *;


.form-password {
  position: relative;

  .form-control {
    padding-inline-end: ($input-line-height * $input-font-size) + ($input-padding-y * 2);
  }

  .form-password-action {
    $size: ($input-line-height * $input-font-size) + $input-padding-y;

    position: absolute;
    inset-inline-end: math.div($input-padding-y, 3) * 2;
    top: 50%;
    width: $size;
    height: $size;
    margin-top: calc($size / -2); // stylelint-disable-line function-disallowed-list
    background: $form-password-action-bg;
    border: 0;
    @include border-radius($input-border-radius-sm);
    @include transition($btn-transition);

    &:hover:not(:disabled) {
      background-color: $form-password-action-hover-bg;

      .form-password-action-icon {
        background-color: $form-password-icon-hover-color;
      }
    }

    &:focus {
      color: $input-focus-color;
      background-color: $input-focus-bg;
      border-color: $input-focus-border-color;
      outline: 0;
      @if $enable-shadows {
        @include box-shadow($input-box-shadow, $input-focus-box-shadow);
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: $input-focus-box-shadow;
      }
    }
  }

  .form-password-action-icon {
    display: block;
    width: $form-password-icon-size;
    height: $form-password-icon-size;
    background-color: $form-password-icon-color;
    mask: $form-password-icon-show center / $form-password-icon-size no-repeat;
  }

  .form-control[type="text"] ~ .form-password-action .form-password-action-icon {
    mask-image: $form-password-icon-hide;
  }

  .form-control-lg ~ .form-password-action .form-password-action-icon {
    width: $form-password-icon-size-lg;
    height: $form-password-icon-size-lg;
    mask-size: $form-password-icon-size-lg;
  }

  .form-control-sm ~ .form-password-action .form-password-action-icon {
    width: $form-password-icon-size-sm;
    height: $form-password-icon-size-sm;
    mask-size: $form-password-icon-size-sm;
  }

  .form-control-lg ~ .form-password-action {
    $size: ($input-line-height * $input-font-size-lg) + $input-padding-y-lg;

    inset-inline-end: math.div($input-padding-y-lg, 3) * 2;
    width: $size;
    height: $size;
    margin-top: calc($size / -2); // stylelint-disable-line function-disallowed-list
    @include border-radius($input-border-radius);
  }

  .form-control-sm ~ .form-password-action {
    $size: ($input-line-height * $input-font-size-sm) + $input-padding-y-sm;

    inset-inline-end: math.div($input-padding-y-sm, 3) * 2;
    width: $size;
    height: $size;
    margin-top: calc($size / -2); // stylelint-disable-line function-disallowed-list
  }
}