@import 'src/css/quasar.variables.scss';

.wrapper__row--button {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.wrapper__row--information {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.box--import-tokens {
  display: grid;
  padding: 16px;
  border-radius: 6px;
  width: 344px;
  height: 90px;
  text-align: left;
  background: $gray-1;
  margin-bottom: 16px;
  @media (min-width: $sm) {
    width: 412px;
  }
}

.box__title {
  display: grid;
  row-gap: 16px;
  text-align: left;
  margin-bottom: 8px;
}

.input--search {
  border: none;
  height: 100%;
  width: 100%;
  padding: 0 4px;
  font-weight: 500;
  font-size: 16px;
  background: $gray-1;
  transition: all 0.5s ease 0s;
  &:focus {
    transition: all 0.5s ease 0s;
    outline: none;
  }
}

.row--box-error {
  padding: 10px 20px;
  border-radius: 6px;
  width: 344px;
  bottom: 80px;
  border: 1px solid $warning-red;
  background: $box-red;
  text-align: left;
  margin-bottom: -8px;
  @media (min-width: $sm) {
    width: 412px;
  }
}

.button--confirm {
  width: 344px;
  font-size: 22px;
  font-weight: 600;
  height: 44px;
  @media (min-width: $sm) {
    width: 412px;
  }
}

.body--dark {
  .box--import-tokens {
    background: $container-bg-dark;
  }
  .input--search {
    background-color: $container-bg-dark;
  }
  .row--box-error {
    background: $box-red-dark;
  }
}
