/*
  RailsAdmin main CSS
  Keep it clean, people
*/

$avatar-size: 30px;

body.rails_admin {
  .thumbnail {
    display: inline-block;
  }

  /* room for upper navbar */
  padding-top: $navbar-height;

  .navbar {
    .edit_user_root_link {
      position: relative;

      img {
        position: absolute;
        top: ((40px - $avatar-size) / 2);

        & + span {
          margin-left: ($avatar-size + 5px);
        }
      }

      > span {
        color: $navbar-default-link-color;
        line-height: $navbar-height;
        padding-left: $navbar-padding-horizontal;
        padding-right: $navbar-padding-horizontal;
      }
    }
  }

  .sidebar-nav {
    padding: 0;
    background-color: $navbar-default-bg;

    .dropdown-header {
      padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) 3px;
      font-weight: bold;
      color: $gray;
      text-transform: uppercase;
    }

    > .nav-stacked > li > a {
      padding: $padding-base-vertical ($grid-gutter-width / 2);
      border-radius: 0;

      &.nav-level-1 {
        padding-left: $grid-gutter-width;
      }

      &.nav-level-2 {
        padding-left: ($grid-gutter-width * 1.5);
      }

      &.nav-level-3 {
        padding-left: ($grid-gutter-width * 2);
      }
    }
  }

  label.input-group-addon {
    cursor: pointer;
  }

  /* fat labels in forms */
  .label.form-label {
    padding: 7px 7px 8px 7px;
  }

  /* new/edit/export forms */
  .form-horizontal {
    /* hide hidden fields controls by default */
    .control-group .hidden_type {
      display: none;
    }

    .control-group {
      .img-thumbnail {
        margin-bottom: 10px;
      }

      .btn-remove-image {
        &.btn-info {
          margin-top: 10px;
        }
      }
    }

    legend {
      cursor: pointer;
      i {
        vertical-align: inherit !important;
      }
    }

    &.denser {
      margin-top: 30px;
      .controls .nav {
        margin: 30px 0 0;
      }
      .remove_nested_fields,
      .remove_nested_one_fields {
        position: absolute;
      }
      p {
        font-size: 12px;
        line-height: 16px;
      }
      .help-block {
        // margin-top: 0px;
      }
      .input-prepend,
      .input-append {
        margin-bottom: 0px;
        label {
          margin-bottom: 0px;
        }
      }
      legend {
        margin-bottom: 30px;
      }
    }

    /* We want input size to be used, unfixate input width */
    input,
    textarea {
      width: revert;
    }
    .help-block {
      clear: left;
    }
    input[type="file"] {
      display: block;
    }

    /* nested forms */
    .tab-content {
      clear: both;

      .tab-pane {
        @include clearfix;
        border-left: 5px solid #049cdb;
        position: relative;

        fieldset {
          padding-top: 30px;
        }

        .form-group {
          margin-right: 0;
          margin-left: -5px; /* Balance border-left */
        }

        & > .remove_nested_fields,
        & > .remove_nested_one_fields {
          display: block;
          opacity: 0;
          position: absolute;
          top: 0px;
          left: 5px;
          -webkit-transition: opacity 0.15s ease;
          transition: opacity 0.15s ease;
        }
        &:hover > .remove_nested_fields,
        &:hover > .remove_nested_one_fields,
        & > .remove_nested_one_fields.active {
          opacity: 1;
        }
      }
    }

    /* double nesting, guys. Easy. */
    .tab-content .tab-content .tab-pane {
      border-color: lighten(#049cdb, 20%);
      margin-left: 10px;

      .form-group {
        margin-left: -15px; /* Balance border-left */
      }
    }

    /* triple nesting!*/
    .tab-content .tab-content .tab-content .tab-pane {
      border-color: lighten(#049cdb, 30%);
      margin-left: 20px;

      .form-group {
        margin-left: -25px; /* Balance border-left */
      }
    }

    /* totally awesome! nesting on 4 levels! */
    .tab-content .tab-content .tab-content .tab-content .tab-pane {
      border-color: lighten(#049cdb, 40%);
      margin-left: 30px;

      .form-group {
        margin-left: -35px; /* Balance border-left */
      }
    }
  }

  // .modal {
  //   width: 750px;
  //   margin-left: -375px;
  // }

  /* nested nav */
  .nav {
    .nav-level-1 {
      padding-left: 30px;
    }
    .nav-level-2 {
      padding-left: 60px;
    }
    .nav-level-3 {
      padding-left: 90px;
    }
  }

  /* tab links should match icon color */
  .nav.nav-tabs {
    margin-bottom: 20px;

    li.icon a {
      color: #000;
    }
  }

  #sidescroll {
    margin-bottom: 20px;
    overflow-x: auto;
    .table {
      margin-bottom: 0;
    }
  }

  /* Table cells behaviour */
  .table {
    // Cells
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th {
          border-bottom: 0px;
        }
      }
    }
    .thumbnail {
      float: left;
      & + * {
        clear: left;
      }
    }
    /* backport of Bootstrap 1.4 table headers */
    .header {
      cursor: pointer;
      padding-right: 18px;
      &:after {
        content: "";
        float: right;
        margin-top: 7px;
        margin-left: 8px;
        margin-right: -16px;
        border-width: 0 4px 4px;
        border-style: solid;
        border-color: #000 transparent;
        visibility: hidden;
      }
    }
    .headerSortUp,
    .headerSortDown {
      background-color: rgba(141, 192, 219, 0.25);
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    }
    .header:hover {
      &:after {
        visibility: visible;
      }
    }
    .headerSortDown,
    .headerSortDown:hover {
      &:after {
        visibility: visible;
        @include opacity(60);
      }
    }
    .headerSortUp {
      &:after {
        border-bottom: none;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #000;
        visibility: visible;
        @include box-shadow(none);
        @include opacity(60);
      }
    }

    th {
      white-space: nowrap;
    }

    /* text-overflow when cell content > 150px */
    td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }

    th,
    td {
      padding: 5px 10px;
    }

    .sticky {
      position: sticky;
    }

    th.last,
    td.last {
      position: sticky;
      right: 0px;
    }

    /* icons */
    td.links {
      max-width: none;
      .list-inline {
        margin: 0px;
        li {
          display: inline-block;
        }
      }
    }

    /* Shrink to content width */
    .shrink {
      width: 1px;
      white-space: nowrap;
    }

    /* History */
    th.created_at {
      width: 160px;
    }
    th.username {
      width: 140px;
    }
    th.item {
      width: 60px;
    }
  }

  // Remove transparency on sticky cells.
  $table-bg-default: if(
    $table-bg == transparent,
    if($body-bg == transparent, #fff, $body-bg),
    $table-bg
  ) !default;
  .table-striped > tbody > tr:nth-child(even) > td,
  .table-striped > thead > tr > th {
    background-color: $table-bg-default;
  }
  $table-bg-header-sort: #e2eff6 !default;
  .table .sticky,
  .table .last {
    &.headerSortUp,
    &.headerSortDown {
      background-color: $table-bg-header-sort;
    }
  }
}

@media screen and (min-width: $grid-float-breakpoint) {
  body.rails_admin {
    .navbar {
      .edit_user_root_link {
        img {
          top: (($navbar-height - $avatar-size) / 2);
        }
      }
    }

    .sidebar-nav {
      position: fixed;
      top: $navbar-height;
      bottom: 0;
      overflow-y: auto;
    }
  }
}