@import 'welcome/index';
@import 'select-action/index';
@import 'seed-phrase/index';
@import 'end-of-flow/index';
@import 'metametrics-opt-in/index';

.first-time-flow {
  width: 100%;
  background-color: var(--color-background-default);
  display: flex;
  justify-content: center;

  &__wrapper {
    @include screen-sm-min {
      max-width: 742px;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-top: 2%;
    }

    .app-header__metafox-logo {
      margin-bottom: 40px;

      @include screen-sm-max {
        margin-bottom: 0;
      }
    }
  }

  &__import,
  &__form {
    display: flex;
    flex-direction: column;
  }

  &__create-back {
    margin-bottom: 16px;
  }

  &__header {
    @include H1;

    margin-bottom: 24px;
    color: var(--color-text-default);
  }

  &__input {
    max-width: 350px;
  }

  &__text-block {
    margin-bottom: 24px;
    color: var(--color-text-default);

    @include screen-sm-max {
      @include H6;

      margin-bottom: 16px;
    }
  }

  &__button {
    margin: 35px 0 14px;
    width: 170px;
    height: 44px;
  }

  &__checkbox-container {
    display: flex;
    align-items: center;
    margin-top: 24px;
  }

  &__checkbox {
    background: var(--color-background-default);
    border: 1px solid var(--color-border-muted);
    box-sizing: border-box;
    height: 34px;
    width: 34px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      border: 1.5px solid var(--color-primary-alternative);
    }

    .fa-check {
      color: var(--color-primary-default);
    }
  }

  &__checkbox-label {
    @include H4;

    color: var(--color-text-alternative);
    margin-left: 18px;
  }

  &__link-text {
    color: var(--color-primary-default);
  }
}

.first-time-flow__wrapper.intro {
  padding: 0 20px;

  @include screen-sm-min {
    max-width: 1010px;
  }
}