.before-login {
  margin-bottom: calc(var(--base) * 1.5);

  &__title {
    margin-bottom: calc(var(--base) / 2);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-elevation-800);
  }

  &__description {
    margin-bottom: var(--base);
    font-size: 0.9rem;
    color: var(--theme-elevation-600);
  }

  &__buttons {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base) * 0.75);
  }

  &__button {
    padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
    border: 1px solid var(--theme-elevation-150);
    border-radius: 4px;
    background-color: var(--theme-elevation-0);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;

    &:hover:not(:disabled) {
      background-color: var(--theme-success-50);
      border-color: var(--theme-success-250);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    &--loading {
      background-color: var(--theme-elevation-50);
    }
  }

  &__button-name {
    font-weight: 600;
    margin-bottom: calc(var(--base) / 4);
    color: var(--theme-elevation-800);
  }

  &__button-details {
    font-size: 0.85rem;
    color: var(--theme-elevation-600);
  }

  &__error {
    margin-top: var(--base);
    padding: calc(var(--base) * 0.75);
    background-color: var(--theme-error-50);
    border: 1px solid var(--theme-error-200);
    border-radius: 4px;
    color: var(--theme-error-600);
    font-size: 0.9rem;
  }
}
