@import 'settings';

@mixin vf-p-form-password-toggle {
  .p-form-password-toggle {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
  }

  .p-form-password-toggle__label {
    display: inline-block;
    margin-right: $sp-xx-small;
  }

  // Override the input text so that it is more easy to read when it
  // has been toggled to display the text. This expects that the input
  // immediately follows the .p-form-password-toggle element.
  .p-form-password-toggle + [type='text'] {
    &[readonly],
    &[readonly='readonly'] {
      color: $colors--theme--text-default;
    }
  }
}