.settings {
  overflow: auto;
}

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

  // Resolve Button
  .button {
    @include margin(0);
  }

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

.wizard-box {
  .item {
    @include padding($space-normal $space-normal $space-normal $space-medium);
    @include background-light;

    cursor: pointer;
    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;
      }
    }

    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 padding($space-medium);
  @include border-light;
  @include full-height();

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

.inoboxes-list {
  .inbox-item {
    @include margin($space-normal);
    @include flex;
    @include flex-shrink;
    @include padding($space-normal $space-normal);
    @include border-light-bottom();

    background: $color-white;
    cursor: pointer;
    flex-direction: column;
    float: left;
    min-height: 10rem;
    width: 20%;

    &:last-child {
      @include border-nil;

      margin-bottom: $zero;
    }

    &:hover {
      @include background-gray;

      .arrow {
        opacity: 1;
        transform: translateX($space-small);
      }
    }

    .switch {
      align-self: center;
      margin-bottom: $zero;
      margin-right: $space-normal;
    }

    .item--details {
      @include padding($space-normal $zero);

      .item--name {
        font-size: $font-size-large;
        line-height: 1;
      }

      .item--sub {
        font-size: $font-size-small;
        margin-bottom: 0;
      }
    }

    .arrow {
      align-self: center;
      color: $medium-gray;
      font-size: $font-size-small;
      opacity: 0.7;
      transform: translateX(0);
      transition: opacity 0.1s ease-in 0s, transform 0.2s ease-in 0.03s;
    }
  }
}

.settings--content {
  @include margin($space-small $space-large);

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

  .code {
    @include padding($space-one);

    background: $color-background;
    max-height: $space-mega;
    overflow: auto;
    white-space: nowrap;

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

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

  p {
    @include padding($space-medium);
  }

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