//
// User CP
// --------------------------------------------------


// Avatar CP home
//
//==
.form-avatar-home {
  border-top: 1px solid @form-panel-border;
  padding: @form-panel-padding;
  padding-top: @line-height-computed;
  padding-bottom: @line-height-computed;

  .avatar-preview {
    max-width: 200px;
  }

  .usercp-avatar-options {
    ul {
      li {
        a, .btn-link {
          display: inline-block;
          margin: 0px;
          padding: 0px 0px;

          color: @state-default;
          line-height: @line-height-computed * 1.2;

          &:hover, &:focus {
            outline: none;

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

          &:active {
            outline: none;

            color: @state-clicked;
            text-decoration: none;
          }
        }

        a {
          padding: 1px;
        }
      }
    }
  }
}


/* Big displays */
@media (min-width: @screen-sm-min) {
  .usercp-avatar-options {
    padding-top: @line-height-computed / 2;
    padding-left: @line-height-computed / 2;
  }
}


// Uploaded avatar preview
//
//==
.form-avatar-preview {
  overflow: auto;

  .preview-image {
    border-radius: @border-radius-base;
    margin-bottom: @line-height-computed;
    overflow: auto;
    width: 100%;

    text-align: center;

    img {
      border-radius: @border-radius-large;
      width: 90%;
    }
  }

  p {
    text-align: center;
  }

  .btn {
    display: block;
    margin-bottom: @line-height-computed;
    width: 100%;
  }
}


@media (min-width: @screen-sm-min) {
  .form-avatar-preview {
    .preview-image {
      float: left;
      width: auto;

      img {
        border-radius: @border-radius-base;
        margin-right: @line-height-computed;
        max-height: 36px;
        width: auto;
      }
    }

    p {
      position: relative;
      top: 4px;

      text-align: left;
    }

    .btn {
      width: auto;
    }
  }
}


// Drag and drop upload
//
//==
.form-avatar-upload {
  border-top: 1px solid @form-panel-border;
  padding: @form-panel-padding;
  padding-top: @line-height-computed;
  padding-bottom: @line-height-computed;

  .drag-drop-area {
    background-color: @form-panel-bg;
    border: 6px dashed @state-default;
    border-radius: @border-radius-large;
    display: block;
    padding: (@line-height-computed * 2) @line-height-computed;

    color: @state-default;
    cursor: pointer;
    text-align: center;

    .fa {
      font-size: @line-height-computed * 3;
      margin-bottom: @line-height-computed;
    }

    p {
      margin-bottom: 0px;
    }

    &:hover {
      border-color: @state-hover;

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

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

      color: @state-clicked;
      text-decoration: none;
    }
  }
}


// Crop avatar
.form-crop-avatar {
  border-top: 1px solid @form-panel-border;
  padding: @form-panel-padding;
  padding-top: @line-height-computed;
  padding-bottom: @line-height-computed;

  .crop-form-container {
    margin-left: auto;
    margin-right: auto;

    text-align: center;

    .cropped-image-border {
      background-color: @form-panel-bg;
      border-radius: @border-radius-small;
      .box-shadow(0px 0px 4px @gray);
      padding: 4px;
      margin-bottom: @line-height-computed / 2;
    }

    .btn-primary {
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
    }
  }
}


// Avatar gallery
//
//==
.avatar-gallery {
  .thumbnail {
    &:hover, &:focus {
      border-color: @state-hover;
      outline: none;
    }

    &:active {
      border-color: @state-clicked;
      outline: none;
      transition: border 0s;
    }
  }
}