@import "faalis/variables";
@import "faalis/base";

$table-list-line-height: 40px;
/*
  <.table-list>
    .buttons
    .details
*/
.table-list{
   ul:not(.button-group){
      border-top:2px solid $lightergray;
      border-bottom: 5px solid $hover-box;
      list-style: none;
      border-radius: $border-radius;
      overflow: hidden;

      li:not(.btn) {
         min-height: $table-list-line-height;
         line-height: $table-list-line-height;
         border-left: solid 1px $lightergray;
         border-right: solid 1px $lightergray;
         border-bottom: solid 1px $lightergray;
         background-color: $verylightgray;
         opacity: 0.8;
         padding-left: 20px;
         padding-right: 20px;

         &.grid {
           padding-left: 0px;
           padding-right: 0px;
           font-size: 14px;
           line-height: 1.25;

         }
         color: lighten(black, 20%);
         overflow: hidden;

           // TODO: Create a mixin for user-select;
         -webkit-user-select: none;
         -moz-user-select: none;
         -khtml-user-select: none;
         -ms-user-select: none;
         -o-user-select: none;
         &.selected {
            background: $selected-bg;
         }
         &:hover.selected{
            background: darken($selected-bg, 5%);
         }
       .show_details {
          display: block;
          @include transition(display 300ms linear 0ms);
       }
       .hide_details {
          display: hide;
          @include transition(display 300ms linear 0ms);
       }
       .title {
          display: inline;
          position: absolute;
          width: 75%;
          height: $table-list-line-height;

       }
       .buttons {
          margin-top: -$table-list-line-height;
          opacity: 0;

          @include transition(opacity 300ms linear 0ms);
       }
       i {
          font-size: 1.2em;
          width: 1em;
          height: 1em;
          text-align: center;
       }
       a{
          color: $darkgray;
       }
       span.btn > a {
          color: white;
       }
       &.table-header {
          background: white;
          padding-top: 3px;
          padding-bottom: 5px;
          opacity: 1;
          .list-type {
            span {
              color: $lightgray;
              cursor: pointer;
              &.active {
                color: $darkgray;
              }
            }
          }
       }
       .overload{
          display:none;
          height:300px;
       }
       &:first-child{
          border-top:solid 1px #E6E6E6;
       }
       &:hover {
            //opacity: 1;
          background: white;
          overflow: hidden;

          & > .buttons {
             opacity: 1;
             @include transition("opacity 300ms linear 0ms");
          }
       }
       div:not(.pagination):not(.ng*) {
          padding-right:10px;
          padding-left:10px;
       }

       &.table-summery {
          opacity: 1;
          background: white;
          .small-text {
             font-size: 0.8em;
             padding: 0 10px;
          }

          .pagination {
            display: inline-block;
            font-size: 1em;
            padding-top: $table-list-line-height / 6;
            input {
              text-align: center;
              display: inline;
              width: 1.6em;
              padding: 0 0.1em;
              margin: 0;
              font-size: 1.1em;
              height: 1.2em;
              background: lighten($lightergray, 5%);
              border: 1px solid $lightergray;
            }
              .label {
                text-align: center;
                position: relative;
                font-size: 0.7em;
              }
          }

       }
       .details{
          font-size:0.9em;
          margin: 0 1em;
          padding:1em 0;
          .button-group{
             background-color:$lightergray;
             border-radius: 1em 1em 0 0;
          }
        }
    }
 }
}
.grid-style {
  width: 100%;
  height: 300px;
  max-height: 500px;

}