@import "import";

.section {
  position: relative;
  width: 100%;
  height: 100%;

  @include flex(column);

  h4 {
    font-family: var(--font-family-sans-serif);
    font-size: 2.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.8rem;
    letter-spacing: -0.026rem;
    color: white;
    text-align: center;
    cursor: default;
    user-select: none;

    @include breakpoint(medium) {
      font-size: 3.2rem;
      line-height: 3.5rem;
      letter-spacing: -0.032rem;
    }
    + h4 {
      margin: 0 var(--spacer-11) 0 var(--spacer-11);
      opacity: 0.5;
    }
  }

  .generatingTextWrapper {
    position: relative;
    width: 100%;
    max-width: min(90vw, 70ch);
    margin: 0 auto;

    .generatingText {
      position: absolute;
      opacity: 0;
      width: 100%;
      transition: opacity 400ms;
      transform: translateX(-200vw);
      transition-delay: 0ms;
    }

    .visible {
      display: inline-block;
      opacity: 1;
      transition-delay: 300ms;
      transform: translateX(-50%);
    }
  }

  .error {
    @include flex(column);
    margin-top: 15vh;
    max-width: min(90vw, 70ch);

    .msg {
      @include flex(column);
    }
    .errorIcon {
      width: 5.2rem;
      height: 5.2rem;
      margin-bottom: var(--spacer-4);
    }

    h4 {
      margin: 0.5em 0 0 0;
      font-weight: 650;
    }
    .errorDesc {
      margin: 0.5em 0 0 0;
      font-weight: 500;
    }
    .btRetry {
      position: fixed;
      bottom: var(--footer-height);
    }
  }
}