.settings {
  @apply overflow-auto;
}

.wizard-box {
  .item {
    @apply cursor-pointer py-4 pr-4 pl-6 relative;

    &::before,
    &::after {
      @apply bg-slate-75 dark:bg-slate-600 content-[''] h-full absolute top-5 w-0.5;
    }

    &::before {
      @apply h-4 top-0;
    }

    &:first-child {
      &::before {
        @apply h-0;
      }
    }

    &:last-child {
      &::after {
        @apply h-0;
      }
    }

    &.active {
      h3 {
        @apply text-woot-500 dark:text-woot-500;
      }

      .step {
        @apply bg-woot-500 dark:bg-woot-500;
      }
    }

    &.over {
      &::after {
        @apply bg-woot-500 dark:bg-woot-500;
      }

      .step {
        @apply bg-woot-500 dark:bg-woot-500;
      }

      & + .item {
        &::before {
          @apply bg-woot-500 dark:bg-woot-500;
        }
      }
    }

    h3 {
      @apply text-slate-800 dark:text-slate-100 text-base pl-6;
    }

    .completed {
      @apply text-green-500 dark:text-green-500 ml-1;
    }

    p {
      @apply text-slate-600 dark:text-slate-300 text-sm m-0 pl-6;
    }

    .step {
      @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5;

      i {
        @apply text-xxs;
      }
    }
  }
}

.wizard-body {
  @apply border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6;

  &.height-auto {
    @apply h-auto;
  }
}

.settings--content {
  @apply my-2 mx-8;

  .title {
    @apply font-medium;
  }

  .code {
    @apply bg-slate-50 dark:bg-slate-800 overflow-auto p-2.5 whitespace-nowrap;

    code {
      @apply bg-transparent border-0;
    }
  }
}

.login-init {
  @apply pt-[30%] text-center;

  p {
    @apply p-6;
  }

  > a > img {
    @apply w-60;
  }
}