@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/fonts';

.sco-signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--pix-spacing-4x);
  align-items: stretch;
  max-width: 360px;

  & .pix-input {
    width: 100%;
  }

  &__login-options {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--pix-neutral-800);
    font-weight: var(--pix-font-bold);
    font-size: 0.875rem;
    font-family: fonts.$font-roboto;
  }

  &__login-mode-container {
    margin-bottom: var(--pix-spacing-3x);
  }

  &__required-inputs {
    color: var(--pix-neutral-500);
    font-weight: var(--pix-font-normal);
    font-size: 1rem;
    font-family: fonts.$font-roboto;
  }

  .signup-button-container {
    display: flex;

    button {
      flex-grow: 1;
      margin-top: 25px;
    }
  }

  hr {
    height: 2px;
    margin: 20px 0;
    color: var(--pix-neutral-20);
    background-color: var(--pix-neutral-20);
    border: none;
  }

  &__action-form-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-4x);
    width: 100%;
    margin-top: var(--pix-spacing-3x);
  }

  &__error {
    padding: 4px 10px;
    color: var(--pix-warning-700);
    font-size: 0.938rem;
    text-align: center;

    @include breakpoints.device-is('tablet') {
      padding: 10px 10px 0;
    }
  }

  &-username-container {
    .pix-input__input {
      color: var(--pix-neutral-800);
    }
  }
}
