@import 'css/master/settings/settings';

/****************
Users
*****************/
@keyframes bgFlicker {
  0%   { background-color: $white; }
  25%  { background-color: $lightBlue; }
  60%  { background-color: $lightBlue; }
  100% { background-color: $white; }
}
@-webkit-keyframes bgFlicker {
  0%   { background-color: $white; }
  25%  { background-color: $lightBlue; }
  60%  { background-color: $lightBlue; }
  100% { background-color: $white; }
}

#accountUsersTableForm {//minor animation on shifting users table down when add user form is shown
  transition: margin-top .2s ease-out;
  -webkit-transition: margin-top .2s ease-out;
}

#usersTab {
  .push_down {
    margin-top: 35px;
    transition: margin-top .2s ease-out;
    -webkit-transition: margin-top .2s ease-out;
  }

  table {
    display: inline-block;
    table-layout: fixed;
  }
  tr {
    word-break: break-all;
    word-wrap: break-word;

    &:not(.edit_row),
    &.border_bottom {//TODO figure out tr:not(.edit_row:first-of-type) to allow second edit row to have border
      border-bottom: 1px solid $grayLight;
    }
    vertical-align: middle;

    &:first-of-type {
      border-bottom: 1px solid $gray;
    }
    &:last-of-type {
      border-bottom: 1px solid $white;
    }

    &.edit_row .float_label_no_input {
      height: auto;
      min-height: 62px;

      > label { //mimic forms.css float label
        color: $gray;
        left: 4px;
        position: relative;
        top: 0;
        @include font-size($baseFontSize - 4);
      }
    }

    //new_row class gets removed after flicker (don't append more styles for later use)
    &.new_row {
      animation: bgFlicker 1s 1;
      -webkit-animation: bgFlicker 1s 1;
    }
  }
  th {
    font-weight: $fontWeightSemiBold;
    min-width: 20%;
    @include font-size($baseFontSize + 2);

    &:nth-of-type(-n+3) {
      min-width: 300px;
    }
    &:nth-of-type(n+3) {
      width: 118px;
    }
  }
  td {
    padding: $commonPadding*3 $commonPadding*3 $commonPadding*3 0;
    @include font-size($baseFontSize);

    &:nth-of-type(-n+3) {
      width: 312px;
    }
    &:nth-of-type(n+3) {
      max-width: 118px;
      width: 118px;
    }
    &:last-of-type {
      min-width: 118px;
    }

    .admin_text.is_primary_user.hide {
      display: inline;
    }
  }

  //Bottom edit row doesn't need top padding
  tr.edit_row.border_bottom > td {
    padding-top: 0;
  }

  .tall_select {
    height: 42px;//match the float_labels
    width: 108px;
  }
}

#addUserBtn {
  top: 0;
  width: 112px;
  z-index: 10;

  transition: top .2s ease-out;
  -webkit-transition: top .2s ease-out;
  &.is_dropped {
    top: 55px;

    transition: top .2s ease-out;
    -webkit-transition: top .2s ease-out;
  }
}

#addUserForm {
  transform: scale(0, 1);
  -webkit-transform: scale(0, 1);
  transform-origin: right;
  -webkit-transform-origin: right;

  transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;

  &.show {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);

    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
  }

  .info {
    right: -24px;
    top: 14px;
  }

  .login_exists_label { //match error text class
    color: #C00;
    @include font-size($baseFontSize - 4);
  }

  ul {
    clear: left;

    li {
      display: inline;
      float: left;
      margin-right: $commonPadding*6;
      width: 24%;
    }
  }

  .login_name_list .float_label {
    & > label:first-of-type {
      bottom: 6px;
    }
    & > input:focus + label,
    & > input:valid + label,
    & > input.error + label {
      bottom: 20px;
    }
    & > #addLoginName + label {
      bottom: 24px;
    }
    & > input.error + label.is_floated,
    & > #addLoginName + label.is_floated{
      bottom: 40px;
    }
  }

  .error_stick {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: #C00;
    height: 1.2em;
    font-size: 1em;
    line-height: 1.2em;
    margin: 0;
    padding: 6px 0 0;
  }
}

.tablet .login_name_list .float_label > input ~ label.is_floated {
  bottom: 40px !important;
}

#showMoreUsersBtn {
  border-width: 1px;
  padding: $commonPadding*2 0;
  width: 50%;
}