@import "import";

.section {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}

.wrapperUI {
  position: absolute;
}

.overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: color(black-20);
  will-change: backgroundColor;
}

.wrapperSticky {
  position: sticky;
  top: 0px;
  @include flex(column, flex-start, center);
  height: var(--vh);
  width: 100%;
  overflow: hidden;
}

.generatingTextWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  @include flex(column, center, center);
}

.songResults {
  @include flex(column, space-between, center);
  flex: 1;
  max-height: min(calc(50vh - var(--footer-height)), 42rem);
  max-height: min(calc(50dvh - var(--footer-height)), 42rem);
  min-height: 27.5rem;
  margin-bottom: var(--spacer-12);
  user-select: none;
}

.controls {
  @include flex(row, center, center, var(--spacer-3));
}

.songTitle {
  font-family: var(--font-family-serif);
  font-size: 4.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 4.2rem;
  letter-spacing: -0.096rem;
  white-space: nowrap;

  @include breakpoint(medium) {
    font-size: 5.6rem;
    line-height: 5.3rem;
    letter-spacing: -0.0168rem;
  }
}

.info {
  text-align: center;
  p {
    line-height: var(--spacer-s);
    @include breakpoint(medium) {
      line-height: var(--line-height-body);
    }
  }
}

.btRestart {
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.lyrics {
  @include flex(column, flex-start, center);
  transition: transform 0.5s;

  .inner {
    width: 100%;
    max-width: 36.3rem;
    padding: 2.8rem 1.6rem;
    background: #4f57b8;
    border-radius: var(--border-radius-3);
    margin-top: -6rem;
    margin-bottom: var(--footer-height);
    will-change: opacity;
    position: relative;

    pointer-events: auto;

    .gradient {
      background: linear-gradient(0deg, #4f57b8 75%, rgba(79, 87, 184, 0) 100%);
      position: absolute;
      padding-top: calc(var(--spacer-4) + 2.1rem);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      transition: opacity 0.5s;
      will-change: opacity;
      transform: translateZ(0);
      border-radius: var(--border-radius-3);
      pointer-events: none;
    }
    h4 {
      font-family: var(--font-family-sans-serif);
      font-size: 1.8rem;
      font-style: normal;
      font-weight: 650;
      line-height: 2.1rem;
      letter-spacing: -0.018rem;
      margin-bottom: var(--spacer-4);
      user-select: auto;
    }
    p {
      font-family: var(--font-family-sans-serif);
      font-size: 1.8rem;
      font-style: normal;
      font-weight: 500;
      line-height: 2.1rem;
      letter-spacing: -0.018px;
      user-select: auto;
    }

    ::selection {
      background-color: rgba(0, 0, 0, 0.3);
    }

    .downloads {
      @include flex(column);
      margin: 4rem 0 1.8rem;

      @keyframes breathing {
        from {
          opacity: 0.5;
        }
        to {
          opacity: 0.2
        }
      }

      .disabled {
        pointer-events: none;
        opacity: 0.5;
        animation: breathing 2000ms;
        animation-fill-mode: both;
        animation-direction: alternate;
        animation-iteration-count: infinite;
      }

      span {
        font-size: 1.8rem;
        font-weight: 650;
        flex: 1;
      }

      .downloadButtons {
        @include flex(row, center, center, 1rem);
        margin-top: 1.8rem;
      }
    }
  }
}

.btCarrousel {
  --margin: -35%;
  position: absolute;
  display: block;
  top: 58%;
  height: 40%;
  left: var(--margin);
  width: 50%;
  //outline: 1px red solid;
  pointer-events: auto;
  cursor: pointer;

  &:last-child {
    left: auto !important;
    right: var(--margin) !important;
  }

  @include breakpoint(medium) {
    --margin: -19%;
    top: 51%;
    height: 40%;
    left: var(--margin);
    width: 34%;

    &:last-child {
      right: var(--margin) !important;
    }
  }
}