.userToolbar {
  max-width: 100%;
  padding: 0.25rem;
  margin-bottom: 0.5rem;
  z-index: 20;
}

.userWindow {
  height: 100%;
}

.userWindow__content {
  flex: 1;
}

.header {
  position: relative;
  height: 45px;
  z-index: 3;
  &__title > h1 {
    line-height: 35px;
    text-shadow: 1px 0 #050608;
    letter-spacing: 1px;
  }
  &__buttons,
  &__search {
    width: 255px;
    height: 38px;
  }
  &__button.header__button {
    &.-nav {
      width: 35px;
    }
    &.-nav:after {
      position: absolute;
      content: "";
      width: 16px;
      height: 16px;
      left: calc(50% - 8px);
      top: calc(50% - 8px);
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
      background-size: contain;
    }
    &.-nav.-back {
      &:after {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
      }
    }
    &.-disabled:after {
      opacity: 0.3;
    }
    &.-history {
      text-align: right;
    }
  }
  &__search > label {
    font-size: 14px !important;
    line-height: 33px;
    padding: 0 0.25rem 0 0.5rem;
  }
}

.searchHistory {
  &.searchHistory {
    position: relative;
    left: -60px;
    top: 35px;
    display: none;
    &.-visible {
      display: block;
    }
  }
  &__inner {
    min-height: 100%;
    min-width: 120px;
    max-width: 150px;
    padding: 0.5rem;
    box-shadow: 0px 5px 5px 0px hsla(0, 0%, 0%, 0.3);
  }
  &__button {
    width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    &.-current:after {
      position: absolute;
      content: "";
      left: 0;
      top: 5px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 8px solid #208c71;
    }
  }
}

.searchResultsOverlay {
  position: absolute;
  top: 43px;
  right: 5px;

  &__panel.searchResultsOverlay__panel {
    width: 300px;
    height: 300px;
    padding: 0.5rem;
    box-shadow: 0px 5px 5px 0px hsla(0, 0%, 0%, 0.3);
  }
  &__inner {
    height: 100%;
  }
  &__row.searchResultsOverlay__row {
    position: relative;
    padding: 0.75rem;
    > p {
      max-width: 250px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px !important;
    }
  }
  &__login {
    font-size: 8px !important;
    padding-left: 0.5rem;
  }
  &__button.searchResultsOverlay__button {
    position: absolute;
    top: 6px;
    right: 0.25rem;
    opacity: 0;
    visibility: hidden;
  }
  &__row:hover .searchResultsOverlay__button {
    opacity: 1;
    visibility: visible;
  }
}

.userContent {
  height: 100%;
  position: relative;
  &__loading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #c6c6c6;
    z-index: 2;
  }
}
.userContent__tabs.-disabled {
  pointer-events: none;
}
.userContent__tabs .userContent__tab {
  min-width: 100px;
  text-align: center;
}
.userContent__tabs.-disabled .userContent__tab {
  color: #6c6c6c;
}
.userContent__tab .badge {
  position: relative;
  top: -2px;
}
.userContent__tabs.-disabled .badge {
  display: none;
}
.userContent__tabBody.userContent__tabBody {
  position: relative;
}
.userContent__body {
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
}
.userContent__bodyInner {
  height: 100%;
  border: 1px inset #ededed;
}
.userContent__intro {
  margin-top: 3rem;
}
.userContent__tabTitle {
  text-align: center;
  padding: 1rem;
}

/* User content overview */
.overview {
  &__header {
    padding: 1rem;
  }
  &__headerCol {
    width: 50%;
  }
  &__profileImage {
    position: relative;
    width: 135px;
    height: 135px;
    border: 1px outset #ededed;
    > img {
      width: 135px;
      height: 135px;
      image-rendering: pixelated;
    }
  }
  &__user {
    padding-left: 1.25rem;
  }
  &__titleBadge {
    position: relative;
    top: -4px;
  }
  &__name {
    // color: #ededed;
    line-height: 2;
    margin-bottom: 0.5rem;
  }

  &__badges {
    margin-left: -5px;
    text-align: center;
  }
  &__link {
    position: relative;
    display: block;
    padding-left: 22px;
    margin-right: 1rem;
    line-height: 2;
    // color: #ededed !important;
    &:before {
      position: absolute;
      content: "";
      bottom: 0;
      left: 0;
      width: 25px;
      height: 25px;
      image-rendering: pixelated;
      background-size: contain;
    }
    &.-profile {
      min-width: 120px;
      &:before {
        background-image: url("../../assets/profile-icon.png");
      }
    }
    &.-email {
      min-width: 70px;
      padding-left: 26px;
      &:before {
        background-image: url("../../assets/email-icon.png");
        bottom: -4px;
        left: -3px;
      }
    }
  }

  &__status {
    padding: 0 0.15rem 0.25rem;
    margin-left: auto;
    overflow: hidden;
  }

  &__statusTitle {
    position: relative;
    &:after {
      position: absolute;
      content: "";
      top: calc(50% - 7px);
      right: -20px;
      width: 0;
      height: 0;
      margin-right: 0.5rem;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-right: 7px solid #fff;
    }
  }

  &__statusUpdate {
    position: relative;
    background-color: #fff;
    color: #000;
    border: 1px outset #ededed;
    padding: 0.25rem 0.5rem 0.75rem 0.5rem;
    margin-left: 0.75rem;
    overflow: hidden;

    > span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  &__statusTime {
    position: absolute;
    right: 0.5rem;
    bottom: 0.15rem;
    color: #8ca7ec;
    font-size: 7px !important;
  }

  &__events {
    max-height: 250px;
    margin-top: 0.25rem;
    padding: 0.5rem;
    background-color: #ededed;
  }

  &__body {
    padding: 0 1rem 1rem;
  }

  &__bodyContent {
    background-color: #fff;
  }

  &__chartWrapper {
  }
  &__chartCol {
    width: 50%;
  }
  &__chart {
    > .pieChart {
      margin-left: -1rem;
    }
  }

  &__pins {
    padding: 1rem 1rem 0;
  }

  &__pin {
    position: relative;
    width: calc(50% - 0.5rem);
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #fff;
  }
  &__pinInner {
    padding: 0.5rem;
  }
  &__pinName {
    display: table;
    font-size: 14px !important;
    margin-bottom: 1rem;
  }
  &__pinDesc {
    margin-bottom: 0.5rem;
  }
  &__pinBadge {
    position: relative;
    padding-left: 21px;
    margin-right: 80px;
    margin-bottom: 4px;
    > .badge {
      position: absolute;
      top: 1px;
      left: -6px;
    }
  }
  &__pinButton {
    position: absolute !important;
    bottom: 0.5rem;
    right: 0.5rem;
  }
}

.reposOverTime {
  &__badge {
    text-align: center;
    width: 160px;
    height: 160px;
    margin: 1rem auto;
    padding: 1rem;
    background: #ededed;
  }
  &__badgeSegment {
    &.-total {
      font-size: 30px !important;
      margin-bottom: -10px;
    }
    &.-since {
    }
    &.-date {
      font-size: 16px !important;
      margin-bottom: -5px;
    }
  }
}

.activity {
  &__list {
    list-style: square outside none;
    padding-left: 1rem;
    > li {
      list-style: inherit;
      line-height: 3;
    }
  }
  .badge.badge {
    padding: 3px 2px;
    margin-left: 0;
    min-width: 12px;
    text-align: center;
    font-size: 9px !important;
    background: #9cead7; // visually matches highlighted day in heatmap
  }
}

.events {
  &__list {
  }
  &__month {
    margin-bottom: 1rem;
    > h3 {
      font-size: 12px;
      margin-bottom: 0.5rem;
    }
  }
  &__eventList {
  }
  &__event {
  }
  &__date {
    display: inline-block;
    min-width: 45px;
    margin-right: 10px;
  }
  &__openRepo {
    background: none;
    color: inherit;
    border: none;
    font: inherit;
    outline: inherit;
    white-space: nowrap;
    color: #1034a6;
    text-decoration: underline;
  }
  &__plusMore {
    font-size: 8px !important;
  }
  &__showMore {
    margin-bottom: 0.75rem;
  }
}

/* User repos */
//
/* User followers & following */
.userFollows__avatar {
  width: 60px;
  height: 60px;
  image-rendering: pixelated;
}
.userFollows__details {
  padding-left: 1rem;
}
.userFollows__login.userFollows__login {
  position: relative;
  top: -3px;
  color: #000;
}
/* User gists */
.gist {
  padding: 1rem;
  &__header {
    padding: 0 0 0.5rem 5px;
  }
  &__block {
    position: relative;
  }
  &__title {
  }
  &__cutout {
    max-height: 300px;
    overflow: hidden;
    background-color: #3a3a3a;
  }
  &__code {
    position: relative;
    color: #fff;
    padding: 0.65rem;
    line-height: 1.8;
    > p {
      margin-bottom: 0.5rem;
      text-shadow: -1px 0 #fff;
      letter-spacing: 1px;
    }

    &:after {
      position: absolute;
      content: "";
      height: 90px;
      left: 0;
      right: 0;
      top: 210px;
      background-image: linear-gradient(0deg, #3a3a3a 20%, transparent 100%);
    }
  }
  &__url {
    position: absolute;
    bottom: 2rem;
    right: 1.25rem;
  }
}

.pagination {
  &__list {
    margin: 0.5rem 0;
  }
}
