@import '@legends/styles/base.scss';

.wrapper {
  display: flex;
  gap: 1.875rem;
  margin-bottom: 1.75rem;

  .column {
    display: flex;
    flex-direction: column;
    flex: 1;

    .stepper {
      display: grid;
      grid-auto-rows: 1fr;
      gap: 0.625rem;

      .step {
        display: flex;
        align-items: center;
        gap: 1.5rem;

        &.complete {
          .stepNumber {
            background: rgba($green-500, 0.9);
          }
          .stepTitle {
            color: $mainText;
          }
        }

        &.active {
          .stepNumber {
            border-color: $mainText;
          }
          .stepTitle {
            color: $mainText;
          }
        }

        .stepNumber {
          display: flex;
          flex: none;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
          line-height: 2rem;
          width: 3.4375rem;
          height: 3.4375rem;
          background: $hover-dark;
          color: $mainText;
          border-radius: 50%;
          position: relative;
          border: 1px solid transparent;

          &::after {
            content: '';
            position: absolute;
            width: 0.0625rem;
            height: 100%;
            background: $hover-dark;
            bottom: -1.75rem;
            z-index: -1;
          }
        }

        &:last-child {
          .stepNumber {
            &::after {
              display: none;
            }
          }
        }

        .stepTitle {
          display: flex;
          align-items: center;
          font-size: 1.125rem;
          font-weight: 300;
          color: $mainText;
        }
      }
    }

    .image,
    .video {
      border-radius: $secondaryBorderRadius;
    }

    .image {
      width: 100%;
      height: auto;
      border: 1px solid rgba(106, 111, 134, 0.2);
    }

    .video {
      min-height: 15.625rem;
      margin: auto;
      width: 100%;
    }
  }
}

.link {
  color: $success;
  text-decoration: none;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}

.copySection {
  font-size: 1rem;
}
.copyField {
  background-color: $primaryBackground;
  border: 1px solid $primaryBorder;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.copyIcon {
  cursor: pointer;
}

.copyHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copySectionWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.boldText {
  font-weight: 600;
}

@include breakpoint-down-from(medium-desktop) {
  .wrapper {
    gap: 1.40625rem;

    .column {
      .stepper {
        gap: 0.75rem;

        .step {
          gap: 1.125rem;

          .stepNumber {
            font-size: 1.5rem;
            line-height: 1.5rem;
            width: 3rem;
            height: 3rem;
          }

          .stepTitle {
            font-size: 0.984375rem;
          }
        }
      }

      .video {
        min-height: 11.71875rem;
      }
    }
  }

  .link {
    font-size: 0.75rem;
  }

  .copySection {
    font-size: 0.75rem;
  }

  .copyField {
    padding: 0.375rem;
  }

  .copySectionWrapper {
    margin-bottom: 0.75rem;
  }
}

@include breakpoint-down-from(large-tablet) {
  .wrapper {
    flex-direction: column;
  }
}
