.account__header {

  &.inactive {
    opacity: 0.5;

    .account__header__image,
    .account__avatar {
      filter: grayscale(100%);
    }
  }

  &__info {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  &__image {
    overflow: hidden;
    height: 350px;
    position: relative;
    background: darken($ui-base-color, 4%);

    &--none {
      height: 125px;
    }

    @media screen and (max-width:895px) {
      height: 225px;
    }

    img {
      object-fit: cover;
      display: block;
      margin: 0;

      @include size(100%);
    }
  }

  &__bar {
    display: block;
    min-height: 74px;
    width: 100%;
    position: relative;
    background: lighten($ui-base-color, 4%);

    @media (min-width:895px) {
      height: 74px;
    }
  }

  &__avatar {
    display: block;
    position: absolute;
    border: 5px solid lighten($ui-base-color, 4%);
    left: 0;
    top: -90px;
    background-color: darken($ui-base-color, 8%);

    @include circle(200px);

    // NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page
    .account__avatar {
      background-size: 200px 200px;

      @include size(200px);
    }

    @media screen and (max-width:895px) {
      top: -45px;
      left: 10px;

      @include size(90px);

      .account__avatar {
        background-size: 90px 90px;

        @include size(90px);
      }
    }

  }

  &__extra {
    display: flex;
    flex-direction: row;
    padding-left: 310px;
    max-width: 1200px;
    box-sizing: border-box;
    position: relative;

    @include size(100%);
    @include margin-center;

    @media (min-width:895px) and (max-width:1190px) {
      max-width: 900px;
      padding-left: 300px;
    }

    @media screen and (max-width:895px) {
      max-width: 900px;
      padding: 10px 10px 0 10px;
      flex-direction: column-reverse;
      min-height: 50px;
    }

    &__buttons {
      display: flex;
      align-items: center;
      margin-left: auto;

      .icon-button {
        box-sizing: content-box;
        padding: 2px;

        @include border-design(lighten($ui-base-color, 12%), 1px, 4px);
      }

      .button {
        margin-right: 10px;
      }
    }

    &__links {
      display: flex;
      font-size: 14px;
      color: $darker-text-color;

      @media screen and (max-width:895px) {
        justify-content: center;
        flex-wrap: wrap;
      }

      a {
        display: inline-block;
        text-decoration: none;
        padding: 16px 22px;
        text-align: center;

        @media screen and (max-width:1190px) {
          padding: 16px;
        }

        >span {
          display: block;

          &:first-of-type {
            color: $primary-text-color;

            @include text-sizing(20px, 800, 24px);

            @media screen and (max-width:895px) {
              @include text-sizing(16px, 800, 20px);
            }
          }

          &:last-of-type {
            color: $ui-secondary-color;
            padding-top: 2px;

            @include text-sizing(12px, 400, 14px);
          }
        }

        &:hover,
        &.active {
          border-bottom: 2px solid $primary-text-color;
        }

        &.score {
          border-bottom: none !important;
        }
      }
    }
  }

  // end .account__header__extra
  @media screen and (max-width:895px) {
    .account-mobile-container {
      display: block;
      background: lighten($ui-base-color, 4%);
      margin-top: 10px;
      position: relative;
      padding: 10px 10px 0px;

      &--nonuser {
        padding: 10px 10px 15px;
      }
    }
  }
}

// end .account__header