@import "j-ui-kit/mixins/all";
@import "mixins/all";

%dlHorizontal {
  @include clearfix();

  dt, dd {
    margin-bottom: 0.7em;
  }

  dt {
    color: $jugnooGrayDarkest;
    float: left;
    width: 14em;
    overflow: hidden;
    clear: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }

  dd {
    margin-left: 18.5rem;
  }
}

.user-settings-wrapper {
  padding-left: 13.5rem;
  margin: 0;
  top: 10.4rem;
  padding-top: 1.5rem;

  hr {
    height: 1px;
    border: 0;
    background: $jugnooGrayDarker;
    margin: 2rem 0;
  }
}

#user-avatar {
  position: absolute;
  left: 1.5rem;

  .max-file-size {
    color: $grey3;
    text-align: center;
  }

  form {
    &:hover {
      .avatar-holder {
        a {
          display: inline-block;
        }
      }
    }
  }

  article.avatar-holder {
    width: 10rem; height: 10rem;
    border-radius: 0.5em;
    position: relative;
    border: 0.1rem solid transparent;
    img{
      width: 10rem; height: 10rem;
      border-radius: 0.5em;
    }
    a {
      display: none;
      position: absolute;
      top: 8rem;
      width: 10rem;
      border-radius: 0 0 0.5rem 0.5rem;
      text-align: center;
      background: { color: rgba(132, 177, 198, .8); }
      color: $headerBackground;
      &:hover { text-decoration: none; }
    }
  }

  .user_avatar_string {
    position: absolute;
    margin-bottom: 0;
    top: 0;

    .controls {
      height: 10rem;
      .file {
        width: 10rem; height: 12rem;
        opacity: 0;
        filter: alpha(opacity=0);
        position: relative;
        top: -2rem;
        cursor: pointer;
      }
    }
  }
}

#user-profile, #user-password {
  dl {
    @extend %dlHorizontal;
    dt.buttons{
        margin-top: 1.5384em;
      }
    dd {
      position: relative;
      > span {
        height: 2rem;
        line-height: 2.3rem;
        max-width: 25rem;
        display: inline-block;
        overflow: hidden;
      }
      form {
        display: none;
        input[type=text] { width: 24rem;}
        .control-group {margin: 0;}
      }
    }
  }
  .simple_form .error .help-block { display: block; }
  .row-actions {
    display: inline-block;
    position: static;
    .edit-delete {
      display: block;
      > .btn-edit-text{
        margin: -0.9rem 0 0 0.5rem;
      }
    }
  }
}

#user-profile, #user-password, #user-notifications {
  position: relative;
  overflow: hidden;

  .btn-save-setting {
    float: inherit;
  }
}

#user-password {
  #password-fields {
    display: none;
  }
  dl {
    margin-top: 1rem;
    dt { margin: 0.6rem 0 0em 0; }
  }
}

.text-section-heading{
  @extend %text-section-heading;
}

#user-notifications {
  form {
    margin-top: 1rem;
  }

  .control-group {
    margin-bottom: 0.5rem;
  }

  .checkbox {
    margin: 0.5rem 0;
  }

  label {
    font-weight: normal;
    margin: 0.4rem 0 0 0.5rem;
  }
}