confirmMessage.css

@import '../app/variables';

:root {
  --steps-nav-height: 22px;
  --header-font-size: var(--paragraph-font-size-l);
}

.address {
  padding: 15px 32px;
  font-family: var(--content-font);
  font-weight: 600;
}

.wrapper {
  position: absolute;
  height: calc(100% - 85px) !important;
  background: var(--color-white);
  width: 100%;
  bottom: 0;
  z-index: 3;

  &.hidden {
    display: none;
  }

  & .copySection {
    margin-top: 0px;
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
  }

  & .copyBorder {
    margin-top: 48px;
    min-height: 55px;
    width: 250px;
    max-width: 100%;
    border-radius: 3px;
    color: var(--color-primary-medium) !important;
    box-shadow: 0 0 0 2px var(--color-primary-medium);
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      color: var(--color-white) !important;
      background: #3c7fb4 !important;
    }
  }

  & header {
    padding-top: 0px;
    height: 40%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    position: relative;
    z-index: 1;

    &.done {
      justify-content: flex-end;
    }
  }

  & h5 {
    line-height: 38px;
  }
}

.table {
  width: 100%;
  height: 60%;
  display: table;
  background-color: var(--color-form-bg);

  & .tableCell {
    display: table-cell;
    vertical-align: middle;
  }
}

.hidden {
  display: none;
}

.result {
  padding: 20px 180px;
  background-color: var(--color-form-bg);

  & textarea {
    background: var(--color-console-background);
    border-radius: 5px;
    overflow: auto;
    color: var(--color-console-text);
    font-family: monospace;
    padding: 12px 24px;
    height: 230px !important;
  }
}

.content {
  position: absolute;
  height: 60%;
  border-top: solid 1px var(--color-white);
  background-color: var(--color-form-bg);
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  flex-direction: column;

  &.done {
    background: var(--color-white);
    border: none;
    justify-content: baseline;
  }
}

.innerContent {
  margin-top: 45px;
  padding: 0 50px;
  background-color: var(--color-form-bg);
}

.signMessage {
  margin-top: 0px;
  display: flex;
  justify-content: center;
}

.confirm {
  top: 20px;
}

.verifier {
  text-align: center;
  height: calc(100% - var(--steps-nav-height));
  margin-right: 0px;
  margin-left: 0px;
  overflow-y: auto;

  & h2 {
    font-size: 48px;
  }

  & header {
    font-size: var(--header-font-size);

    & h2,
    & h5 {
      max-width: 750px;
      margin: 0 auto;
    }

    & h2.done {
      max-width: 320px;
    }

    & h5 {
      visibility: hidden;
      opacity: 0;
      font-size: 18px;
      color: var(--color-error);
      transition: all ease 500ms;
    }
  }

  &.verify {
    & > section.done {
      display: none;
    }

    & h5 {
      &.visible {
        visibility: visible;
        opacity: 1;
        transition-delay: 500ms;
      }
    }
  }
}

@media (--small-viewport) {
  .verifier {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

    & h2 {
      width: 260px;
      font-size: 40px !important;
    }

    & h5 {
      width: 80%;
    }
  }

  .confirm {
    margin-bottom: 150px;
  }

  .table {
    height: 100%;
  }

  .content {
    top: 100%;
  }
}