@layer atoms {
  .mobius-password-field {
    & .mobius-text-field--has-suffix-inside {
      display: flex;
    }

    & :where(.mobius-password-field__show-button) {
      appearance: none;
      font-size: var(--font-size-3);
      font-family: var(--font-family);
      align-self: center;
      display: inline-block;
      background-color: transparent;
      margin: 0 var(--size-xs) 0 0;
      padding: 6px var(--size-xs);
      cursor: pointer;
      border: none;
      border-radius: var(--radius-2);
      color: var(--color-primary);
      transition: var(--transition-standard);
      user-select: none;

      &:focus-visible {
        box-shadow: var(--box-shadow-default);
        outline: none;
      }

      &:hover {
        background-color: var(--color-background-highlight);
      }
    }
  }
}
