//
// User Profile
// --------------------------------------------------


// Profile header
//
//==
.user-profile {
  .profile-header {
    padding: 0px;
    padding-top: @line-height-computed;
    border-bottom-width: 1px;

    h1 {
      &>small {
        &>a, &>a:link, &>a:visited, &>span {
          background-color: fadeOut(@text-muted, 50%);
          border-radius: @border-radius-base;
          display: inline-block;
          padding: @padding-small-vertical @padding-small-horizontal;
          position: relative;
          top: -4px;

          color: @body-bg;
        }

        &>a {
          &:hover {
            background-color: fadeOut(@text-muted, 15%);

            text-decoration: none;
          }

          &:active {
            background-color: @state-clicked;

            text-decoration: none;
          }
        }
      }
    }

    .page-actions {
      .btn {
        .btn-sm();

        &.btn-follow {
          color: @brand-follow;

          &.active {
            .misago-button-active-flavour(#fff, @brand-follow, darken(@brand-follow, 13%));
          }
        }

        &.btn-ban {
          color: @brand-danger;

          &.active {
            .misago-button-active-flavour(#fff, @brand-danger, darken(@brand-danger, 13%));
          }
        }
      }
    }
  }
}


// Avatar
//
//==
.user-profile {
  .profile-side {
    .user-avatar {
      background-color: #fff;
      border-radius: @border-radius-large;
      .box-shadow(0px 0px 0px 2px darken(@body-bg, 5%));
      padding: 4px;
      margin-top: @line-height-computed;
      margin-bottom: @line-height-computed;
    }
  }
}


/* Big displays */
@media (min-width: @screen-sm-min) {
  .user-profile {
    .profile-side {
      .user-avatar {
        margin-top: (@line-height-computed * 4.75) * -1;
      }
    }
  }
}


// Username
//
//==
/* Big displays */
@media (min-width: @screen-sm-min) {
  .user-profile {
    .profile-header {
      .user-name {
        float: left;
      }
    }
  }
}


// Details
//
//==
.user-profile {
  .profile-header {
    .user-details {
      padding-top: @line-height-computed / 3;
      clear: both;

      ul {
        overflow: auto;

        li {
          margin-right: @line-height-computed;

          color: fadeOut(@text-color, 40%);

          a:link, a:visited {
            color: fadeOut(@text-color, 40%);
          }

          a:hover {
            color: @state-hover;
            text-decoration: none;
          }

          a:active {
            color: @state-clicked;
          }
        }
      }
    }
  }
}


// Username history
//
//==
.user-profile {
  .username-history {
    p {
      margin: 0px;
      margin-top: 3px;

      a {
        &:link, &:visited {
          color: @state-hover;
          font-weight: bold;
        }

        &:hover {
          color: @state-hover;
          text-decoration: underline;
        }

        &:active {
          color: @state-clicked;
        }
      }

      img {
        border-radius: @border-radius-small;
        margin-top: -1px;
        margin-right: @line-height-computed / 5;
        height: 22px;
        width: 22px;
      }

      abbr {
        text-decoration: none;
        border-bottom: none;
      }
    }

    hr {
      margin: (@line-height-computed / 2) 0px;
    }
  }
}