.settings {
  overflow: auto;
}

// Conversation header - Light BG
.settings-header {
  @include background-white;
  @include flex;
  @include flex-align($x: justify, $y: middle);
  border-bottom: 1px solid var(--s-50);
  height: $header-height;
  min-height: $header-height;
  padding: $space-small $space-normal;

  // Resolve Button
  .button {
    margin: 0;
  }

  // User thumbnail and text
  .page-title {
    @include flex;
    @include flex-align($x: center, $y: middle);
    margin: 0;
  }
}

.wizard-box {
  .item {
    @include background-light;

    cursor: pointer;
    padding: $space-normal $space-normal $space-normal $space-medium;
    position: relative;

    &::before,
    &::after {
      background: $color-border;
      content: '';
      height: 100%;
      position: absolute;
      top: $space-normal;
      width: 2px;
    }

    &::before {
      height: $space-normal;
      top: $zero;
    }

    &:first-child {
      &::before {
        height: 0;
      }
    }

    &:last-child {
      &::after {
        height: $zero;
      }
    }

    &.active {
      h3 {
        color: $color-woot;
      }

      .step {
        background: $color-woot;
      }
    }

    &.over {
      &::after {
        background: $color-woot;
      }

      .step {
        background: $color-woot;
      }

      & + .item {
        &::before {
          background: $color-woot;
        }
      }
    }

    h3 {
      color: $color-body;
      font-size: $font-size-default;
      line-height: 1;
      padding-left: $space-medium;
    }

    .completed {
      color: $success-color;
      margin-left: $space-smaller;
    }

    p {
      color: $color-light-gray;
      font-size: $font-size-small;
      margin: 0;
      padding-left: $space-medium;
    }

    .step {
      background: $color-border;
      border-radius: 20px;
      color: $color-white;
      font-size: $font-size-micro;
      font-weight: $font-weight-medium;
      height: $space-normal;
      left: $space-normal;
      line-height: $space-normal;
      position: absolute;
      text-align: center;
      top: $space-normal;
      width: $space-normal;
      z-index: 999;

      i {
        font-size: $font-size-micro;
      }
    }
  }
}

.wizard-body {
  @include background-white;
  @include border-light;
  @include full-height();
  padding: $space-medium;

  &.height-auto {
    height: auto;
  }
}

.settings--content {
  margin: $space-small $space-large;

  .title {
    font-weight: $font-weight-medium;
  }

  .code {
    background: $color-background;
    max-height: $space-mega;
    overflow: auto;
    padding: $space-one;
    white-space: nowrap;

    code {
      background: transparent;
      border: 0;
    }
  }
}

.login-init {
  padding-top: 30%;
  text-align: center;

  p {
    padding: $space-medium;
  }

  > a > img {
    width: $space-larger * 5;
  }
}