.user {
  &__actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 2.5rem;

    div {
      align-items: center;
      background: var(--kbin-button-secondary-bg);
      border: var(--kbin-button-secondary-border);
      color: var(--kbin-button-secondary-text-color);
      display: flex;
      flex-direction: row;
      font-size: .9rem;
      left: 1px;
      padding: .3rem .5rem;
      position: relative;

      .rounded-edges & {
        border-radius: .5rem;
      }

      i {
        padding-right: .5rem;
      }
    }

    button {
      height: 100%;
      padding-bottom: .5rem;
      padding-top: .5rem;
    }

    form:last-of-type {
      position: relative;
      right: 1px;
    }

    opacity: .75;
  }
}

.user-inline {
  img {
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.25rem;

    @include media-breakpoint-down(sm) {
      width: 25px;
      height: 25px;
    }
  }
}

.page-user-overview {
  .section--top {
    padding: 0;
    overflow: clip;
  }
}

.user-box {
  figure {
    margin: 0;
    padding: 0;
  }

  img {
    -o-object-fit: cover;
    object-fit: cover;
  }

  h1 {
    font-size: 1.2rem;
  }

  .user-main {
    display: flex;
    margin-left: 1.5rem;
    padding-top: 2rem;
    text-align: center;

    @include media-breakpoint-down(lg) {
      justify-content: space-around;
      margin-left: 0;
    }

    h1 {
      margin-bottom: 0;
    }

    small {
      display: block;
      margin-bottom: 1rem;
    }

    img {
      border: var(--kbin-avatar-border);
    }
  }

  .about {
    margin-bottom: 2.5rem;
    padding: 0 1.5rem;

    @include media-breakpoint-down(sm) {
      padding: 0 .5rem;
    }
  }

  .with-cover.with-avatar {
    .user-main {
      margin-top: 0;
      padding-top: 0;
      position: relative;
      top: -60px;

      .user__actions {
        margin: 0;
      }
    }

    .about {
      margin-bottom: 1.5rem;
      position: relative;
      top: -20px;
    }
  }
}

.users-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);

  @include media-breakpoint-down(sm) {
    grid-template-columns: repeat(1, 1fr);
  }

  .magazine {
    align-content: center;
    align-items: center;
    display: grid;
    grid-template-rows: auto;
  }
}

.users-columns,
.columns {
  font-size: .9rem;

  ul {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;

    @include media-breakpoint-down(lg) {
      grid-template-columns: repeat(2, 1fr);
    }

    @include media-breakpoint-down(sm) {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  ul figure {
    margin: 0 .5rem 0 0;
  }

  ul li {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    position: relative;

    form {
      margin-bottom: 0 !important;
    }
  }


  ul li a {
    display: block
  }

  ul li small {
    color: var(--kbin-meta-text-color);
    font-size: .85rem;
  }
}

.page-user-overview {
  #sidebar {
    .user-info {
      ul li:first-of-type {
        border-top: 0;
      }

    }
  }
}

.page-people {
  .users-cards.section {
    padding: 0;
  }

  .users-cards {
    .section {
      padding: 0;
      overflow: clip;
    }
  }

  .user-box {
    .cover {
      height: 150px;
    }

    .user-main {
      justify-content: center;
      padding-top: 12.6rem;
      position: relative;

      .row {
        position: relative;

        .stretched-link {
          color: var(--kbin-text-color) !important;
          font-weight: bold !important;
        }
      }
    }

    .about {
      font-size: .9rem;
    }
  }

  .with-cover {
    .user-main {
      padding-top: 2.87rem
    }
  }

  .with-avatar {
    .user-main {
      padding-top: 6rem;
    }
  }

  .with-cover.with-avatar {
    padding-top: 0;
    position: inherit;
  }
}

.page-settings {
  .container {
    margin: 0 auto;
    max-width: 32.7rem;

    h2:first-of-type {
      margin-top: 0;
    }
  }
}

td .user__actions {
  margin: 0;
}

.page-settings-password {
  a.btn {
    display: inline-block;
  }
}

.page-settings-2fa {
  .twofa-qrcode {
    display: block;
    text-align: center;
    margin-bottom: 2rem;

    img {
      width: 250px;
      height: 250px;
    }
  }

  .twofa-backup-codes {
    display: flex;
    gap: 0.2rem 1rem;
    flex-wrap: wrap;
    justify-content: start;

    font-family: monospace;
    background: var(--kbin-input-bg);
    border: var(--kbin-section-border);
    padding: 0.5rem;

    li {
      list-style: none;
      padding: 0.1rem 0.34rem;
    }
  }

  .actions {
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1rem;
  }
}