.sui-a-form-password {
  position: relative;

  input {
    padding-left: 2.8em;
  }

  input[type=text] ~ &__button {
    &.as--show {
      display: none;
    }

    &.as--hide {
      display: block;
    }
  }

  // -------------------------
  //   button
  // -------------------------

  &__button {
    z-index: 1;
    position: absolute;
    display: inline-flex;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: $sui-space-xs $sui-space-sm $sui-space-xs $sui-space-md;
    line-height: $sui-line-height;
    text-align: center;
    color: $sui-color-brand-denim-500;
    font-family: $sui-font-family-secondary;
    font-size: $sui-font-size-md;
    font-weight: 300;
    transition: .2s;

    &:hover,
    &:focus {
      color: $sui-color-brand-denim-700;
    }

    &.as--show {
      display: block;
    }

    &.as--hide {
      display: none;
    }
  }

  // -------------------------
  //   Inline
  // -------------------------

  &.as--inline {
    display: inline-block;
  }
}