/* Steps
 * -------------------------------------------------------------------------- */

.step {
  display: none;
  visibility: hidden;
  position: absolute;
  left: -999em;
  top: -999em;
  opacity: 0;
  padding: 1em;
  margin: 0 auto 1em;
  border: 1px solid var(--color-border);
  border-radius: 1em;
  background: var(--color-bg--card);

  @media (min-width: 40em) {
    max-width: 45rem;
    padding: 2em;
  }

  .clearances & { margin-top: var(--base-space); }
}

.step--plain {
  display: none;
  visibility: hidden;
  position: absolute;
  left: -999em;
  top: -20em;
  opacity: 0;
  transition: opacity 1s ease;
}

.step--showing {
  display: block;
  visibility: visible;
  position: relative;
  left: 0;
  top: 0;
  opacity: 1;
}

.step--full-width {
  padding: 1em;
  max-width: none;

  @media (min-width: 40em) { padding: 2em; }
  @media (min-width: 60em) { padding: 5rem; }
}

.step--setup {
  @media (min-width: 60em) { padding: 2em; }
}

.step--world {
  border: 0;
  box-shadow: 0 0 2rem var(--color-bg--primary), 0 1rem 3rem var(--color-bg--secondary), 0 3rem 2rem var(--color-bg--tertiary) !important;

  @media (min-width: 40em) {
    box-shadow: 0 3rem 5rem var(--color-bg--world-primary), 0 7rem 4rem var(--color-bg--world-secondary), 0 12rem 10rem var(--color-bg--world-tertiary) !important;
  }
}

.step__anchor {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  top: -9rem;
}

.substeps .step {
  box-shadow: none;
  padding: 2rem;
  background: linear-gradient(135deg, var(--color-bg--surface) 0%, var(--color-bg--surface-glint) 100%);
  margin: 0 0 2rem;
}

.step--entering:not(.step),
.step--showing.step--entering {
  animation: slide-in-from-left 0.5s both;
}

.step--appearing {
  animation: pop-open 0.25s both;
}

/* Numbered steps with icons */

.step--pending,
.step--done {
  padding-top: 0;
  padding-bottom: 0;
  background: none;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 auto var(--half-space) !important;
}

.step--pending {
  opacity: 0.6 !important;

  .step__prompt { display: none; }
  .step__header { margin: 0.6em 0 0; }
}

.step--active {
  .step__header--active {
    display: inline;

    + span { display: none; }
  }
}

.step--done {
  .step__header:not(.step__header--done),
  .step__prompt { display: none; }

  .step__header--done { display: block; }

  .step__icon { align-items: center; }

  .step__icon::before {
    filter: var(--colorize-green);
    background-image: url("/assets/icons/check-circle-1ec7f2d1.svg");
  }
}

.step__icon {
  display: flex;
}

.step__icon::before {
  content: "";
  width: 2.5em;
  height: 2.5em;
  margin-right: 0.75em;
  background: url("/assets/icons/billing-bd59783f.svg") center center / 100% no-repeat;
}

.step:not(.step--done) .step__icon::before {
  filter: var(--colorize-purple);
}

.step__icon--signup::before { background-image: url("/assets/icons/new-account-7f0265c3.svg"); }
.step__icon--network::before { background-image: url("/assets/icons/network-c622e999.svg"); }
.step__icon--contacts::before { background-image: url("/assets/icons/contacts-d3969e87.svg"); }
.step__icon--extenzion::before { background-image: url("/assets/icons/extenzion-71013e1a.svg"); }
.step__icon--hey::before { background-image: url("/assets/icons/hey-hand-a4a4e096.svg"); }
.step__icon--password::before { background-image: url("/assets/icons/password-7a014b47.svg"); }
.step__icon--2fa::before { background-image: url("/assets/icons/2fa-1e98a660.svg"); }
.step__icon--backup-email-address::before { background-image: url("/assets/icons/backup-email-address-020c423b.svg"); }

.step__header { margin: 0; }
.step__header--active,
.step__header--done { display: none; }

/* Sign-up */

.signup__stepper {
  height: 8rem;
  position: relative;
  background: url("/assets/signup/1-2-3-hands-977d9008.svg") no-repeat center;

  [data-color-scheme="dark"] & { background-image: url("/assets/signup/1-2-3-hands-reverse-23a4d6bd.svg"); }

  &::after {
    content: "";
    width: 6rem;
    height: 6rem;
    background: url("/assets/signup/blob-1eabb3b5.svg") no-repeat center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -2.5rem;
    margin-left: -3.5rem;
    z-index: -1;
    transition: all 1.3s both;
  }

  .signup__stepper--one & {
    &::after {
      margin-left: -13rem;
    }
  }

  .signup__stepper--three & {
    &::after {
      margin-left: 7.5rem;
    }
  }
}

.signup__steps {
  padding-top: 3rem;

  .clearances[open] ~ & { display: none !important; }
}

.signup__invite {
  @media (min-width: 40em) {
    background: url("/assets/abstracts/abstract-1-f8f9a92b.svg") center 8rem / 85% 85% no-repeat;
  }
}

.signup__totp {
  @media (min-width: 40em) {
    background: url("/assets/abstracts/abstract-2-27b463ff.svg") center 8rem / 85% 85% no-repeat;
  }
}

.signup__welcome {
  @media (min-width: 40em) {
    background: url("/assets/abstracts/abstract-4-b3fbe631.svg") center 8rem / 85% 85% no-repeat;
  }
}

.signup__work {
  @media (min-width: 40em) {
    background: url("/assets/abstracts/abstract-3-e6adf2d8.svg") center 8rem / 85% 85% no-repeat;
  }

  .step,
  .steps__header {
    display: none;
    visibility: hidden;
  }

  .steps--completed {
    display: block;
    visibility: visible;
  }
}

.step--sticky-note {
  animation: slide-in-tilt-left 0.5s both;
  background: linear-gradient(135deg, var(--color-bg--note) 0%, var(--color-bg--note-glint) 100%);
  border-radius: 0.2em;
  box-shadow: 5px 5px 7px var(--color-shadow);

  [data-color-scheme="dark"] & { color: var(--color-txt--reversed); }

  .inbox & { top: -5rem; }

  + .step--sticky-note.step--showing {
    animation: slide-in-tilt-right 0.5s both;
  }
}

.step--sticky-note-opaque {
  background: var(--color-bg--note-opaque);
  border: 0;
  border-radius: 0.2em !important;
  box-shadow: 5px 5px 7px var(--color-shadow) !important;
  transform: rotate(-1deg);
  z-index: 1;

  [data-color-scheme="dark"] & { color: var(--color-txt--reversed); }
}

/* Premium Emails */

.signup__header--premium {
  height: 12rem;
  position: relative;
  background: url("/assets/signup/premium_outlined-9b8915d8.svg") no-repeat center;

  [data-color-scheme="dark"] & { background-image: url("/assets/signup/high-five-reverse-19ebe3e8.svg"); }
}

.signup__step--premium {
  background: linear-gradient(90deg, rgba(251,201,38,1) 0%, rgba(255,251,204,1) 25%, rgba(195,146,46,1) 60%, rgba(238,214,136,1) 87%, rgba(255,251,204,1) 100%);
  border-radius: 3.25rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 1rem;

  @media (min-width: 40em) {
    margin-left: -4rem;
    margin-right: -4rem;
    padding: 2rem;
  }
}

.signup__step--premium-content {
  padding: 2rem 3rem;
  background: var(--color-bg--main);
  border-radius: 2rem;
}

/* Calendar Onboarding */
.calendar-onboarding__feeds {
  margin: 0;
  padding: 0;
}

.calendar-onboarding__feed {
  display: block;
  position: relative;
  counter-increment: inst;

  &::before {
    transition: background 200ms ease-in;
    content: counter(inst);
    background: var(--color-border--medium);
    color: var(--color-txt--reversed);
    font-size: var(--font-size-medium);
    font-weight: 500;
    line-height: 2em;
    border-radius: 1em;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1em;
    height: 2em;
    width: 2em;
    z-index: -1;
  }

  &:focus-within {
    &::before {
      background: var(--color-tertiary);
    }
  }

  input {
    padding: 0.5em 0 0.5em 2em;
  }
}