@import '~app/components/ui/colors.scss';
@import '~app/components/ui/fonts.scss';

.finishPage {
  font-family: $font-family-title;
  position: relative;
  max-width: 515px;
  padding-top: 40px;
  margin: 0 auto;
  text-align: center;
}

.iconBackground {
  position: absolute;
  top: -15px;
  transform: translateX(-50%);
  font-size: 200px;
  color: #e0d9cf;
  z-index: -1;
}

.successBackground {
  composes: checkmark from '~app/components/ui/icons.scss';
  @extend .iconBackground;
}

.failBackground {
  composes: close from '~app/components/ui/icons.scss';
  @extend .iconBackground;
}

.title {
  font-size: 22px;
  margin-bottom: 10px;
}

.greenTitle {
  composes: title;

  color: $green;

  .appName {
    color: darker($green);
  }
}

.redTitle {
  composes: title;

  color: $red;

  .appName {
    color: darker($red);
  }
}

.description {
  font-size: 18px;
  margin-bottom: 10px;
}

.codeContainer {
  margin-bottom: 5px;
  margin-top: 35px;
}

.code {
  $border: 5px solid darker($green);

  display: inline-block;
  border-right: $border;
  border-left: $border;
  padding: 5px 10px;
  word-break: break-all;
  text-align: center;
}