.c-profile {
  margin: 0;
  padding: 0;
  text-align: center;

  &__image {
    @include flex-center;
    
    border-radius: 128px;
    margin: 2rem auto;
    height: 128px;
    width: 128px;

    border: 1px solid var(--db-border-color-inactive);
    background: white;

    & img {
      max-width: 80%;
      max-height: 80%;
    }
  }

  &__title {
    font-weight: bold;
    font-size: 1.5em;
    margin: .5rem auto;
    color: var(--db-text-color-active);
  }

  &__subtitle {
    color: var(--db-text-color-inactive);
    margin: .25rem auto;
  }

  &__description {
    margin: 1rem 0;
    color: var(--db-text-color-inactive);
  }

}

.c-navlist {
  margin-top: 1rem;
  user-select: none;
  
  &__item {
    text-align: center;

    &::before,
    &:last-of-type::after {
      background-image: linear-gradient(to left, transparent, var(--db-border-color) 30%, var(--db-border-color) 70%, transparent);
      content: "";
      display: block;
      height: 2px;
      width: 100%;
      opacity: 0.6;
    }

    &:hover {
      background-image: linear-gradient(to left, transparent, var(--db-surface-hover-color) 30%, var(--db-surface-hover-color) 70%, transparent);
    }

    &.is-active {
      font-weight: bold;
    }
  }

  &__link {
    color: inherit;
    display: block;
    padding: .5rem;
    text-decoration: none;
    text-overflow: ellipsis;

    &:not([href]):not([onclick]):hover {
      color: inherit;
      text-decoration: none;
    }
  }
  
}

.c-sociallist {
  display: table;
  color: var(--db-text-color-inactive);
  vertical-align: top;
  margin: 2rem auto;

  &__item {
    font-size: .875em;
  }

  &__icon {
    width: 1.5rem;
    text-align: center;
    padding-bottom: .5rem;
  }

  &__text {
    text-align: left;
    padding-bottom: .5rem;
  }

  a {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: var(--db-text-color-active);
      text-decoration: underline;
    }
  }

}

.c-navtree {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  user-select: none;

  &__group {
    &:not(&--bottom) {
      margin-bottom: 1rem;
    }
    
    &:not(&--bottom) + &--bottom {
      margin-top: auto;
    }
  }

  &__label {
    font-size: small;
    font-weight: bold;
    padding: .5em;
    margin-top: .5rem;
    color: var(--db-text-color-inactive);
    opacity: .75;

    &::after {
      background-image: linear-gradient(to right, var(--db-border-color) 33%, transparent);
      content: "";
      display: block;
      margin-top: .25rem;
      height: 2px;
      width: 100%;
      opacity: 0.6;
    }
  }

  &__item {
    display: flex;
    flex-direction: row;
    border: 1px solid transparent;
    border-radius: $border-radius-control;
    margin: 2px 0;
    overflow: hidden;

    &.is-active {
      font-weight: bold;
    }

    &:not(.is-disabled) .c-navtree__link:hover,
    &:not(.is-disabled) .c-navtree__link:hover + .c-navtree__toggle {
      background-color: var(--db-surface-hover-color);
    }

    &.is-disabled {
      color: var(--db-text-color-disabled);
    }
    
  }

  &__link {
    display: flex;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 8px 0 8px 8px;
    align-items: center;
    flex: 1;
    border: 1px solid transparent;
    color: inherit;

    &:hover {
      text-decoration: none;
      color: inherit;
    }
  }

  &__icon {
    width: 1.5rem;
    text-align: center;
    color: var(--db-text-color-inactive);
    opacity: .88;
  }

  &__badge {
    width: 2.4rem;
    text-align: center;
    color: var(--db-text-color-inactive);
    opacity: .88;
  }

  &__text {
    flex: 1;
    padding: 0 4px;
  }

  &__button {
    color: var(--db-text-color-inactive);
    width: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;

    &--toggle {
      &::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f067";
        font-weight: 600;
  
        @at-root .is-expanded #{&} {
          content: "\f068";
        }
      }
    }

    &:hover {
      color: var(--db-text-color-active);
      background-color: var(--db-surface-hover-color);
    }
    &[href]:hover,
    &[onclick]:hover {
      cursor: pointer;
    }
  }

  &__list {
    flex-direction: column;
    display: none;
    font-size: .8em;
    padding-left: 2rem;

    .c-navtree__icon {
      font-size: xx-small;
    }

    .c-navtree__link {
      padding: 6px 8px;
      font-size: 15px;
    }

    @at-root .is-expanded + #{&} {
      display: inherit;
    }

  }

}

$sidebutton-size: 2rem;
.c-sidebuttons {
  @include flex-center;
  margin-top: auto;

  &__item {
    border: 1px solid var(--db-border-color);
    color: var(--db-text-color-inactive);
    border-radius: $sidebutton-size;
    margin: $sidebutton-size / 4;
    width: $sidebutton-size;
    height: $sidebutton-size;
    line-height: $sidebutton-size;
    text-align: center;

    &:hover {
      background-color: var(--db-surface-hover-color);
      color: var(--db-text-color-active);
      text-decoration: none;
    }
  }

  &__link {
    color: inherit;
    text-decoration: none;
    display: block;

    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }
}

.c-texticon {
  font-family: monospace;
  margin: auto;
  overflow: hidden;
  white-space: nowrap;
  width: 2ch;
}