.email-verification__overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--overlay-color);
}

.email-verification__dismiss {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: flex-end;
  margin: 0 16px;
  width: 100%;

  svg {
    height: 16px;
    width: 16px;
    margin: auto 0;
  }
}

.email-verification__modal {
  align-items: center;
  background-color: var(--background-color);
  border-radius: 8px;
  color: var(--primary-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 20%;
  max-width: 420px;
  padding: 0 24px 16px;
  font-size: 16px;

  .icon-mail,
  .icon-warning {
    color: var(--foreground-color);
    height: 48px;
    width: 48px;
  }

  p {
    margin: 0 26px;
    margin-block-start: 0;
  }

  p:not(:last-of-type) {
    padding-bottom: 20px;
  }

  .email-verification__button-row {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    flex-flow: row wrap;
    width: 100%;

    a {
      padding-right: 12px;
    }

    .button-borderless {
      color: var(--accent-color);
    }
  }

  &:focus {
    outline: 0;
  }
}

.email-verification__email {
  word-break: break-all;
}
