@import "variables";

.table
{
  > thead > tr > th
  {
    padding : px2Rem(8);
    color   : inherit;
  }

  > tbody > tr > td
  {
    vertical-align : middle;

    > .media
    {
      img
      {
        width  : px2Rem(36);
        height : px2Rem(36);
        margin : 0 auto;
      }
    }
  }

  .checkbox
  {
    margin : 0 auto;
    width  : px2Rem(20);
  }

  .progress
  {
    margin-bottom : 0
  }

  .radial-bar
  {
    margin : 0 auto;
  }

  .sortable
  {
    cursor              : pointer;
    background-position : right;
    background-repeat   : no-repeat;
    padding-right       : px2Rem(30);

    &.both
    {
      background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC');
    }

    &.asc
    {
      background-color : $table-caption-color;
      background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==');
    }

    &.desc
    {
      background-color : $table-caption-color;
      background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ');
    }
  }

  .no-items-found
  {
    text-align : center;
    color      : $table-color;
  }

  .min-width
  {
    width       : 1%;
    white-space : nowrap;
    text-align  : center;
  }

  /* Action button (single) */
  .dropdown
  {
    .dropdown-menu
    {
      a:hover,
      a:focus,
      a:active
      {
        text-decoration : none;
      }
    }

    .pull-right
    {
      left  : auto;
      right : 1px;
    }

    .dropdown-menu::before
    {
      position      : absolute;
      top           : px2Rem(-10);
      left          : px2Rem(9);
      display       : inline-block;
      border-right  : px2Rem(10) solid transparent;
      border-bottom : px2Rem(10) solid $dropdown-bg;
      border-left   : px2Rem(10) solid transparent;
      content       : '';
    }

    .dropdown-menu::after
    {
      position     : absolute;
      top          : px2Rem(-9);
      left         : px2Rem(10);
      display      : inline-block;
      border-right : px2Rem(9) solid transparent;
      border-left  : px2Rem(9) solid transparent;
      content      : '';
    }

    .dropdown-menu:before,
    .dropdown-menu.pull-right:before
    {
      right : px2Rem(2);
      left  : auto;
    }

    .dropdown-menu::after,
    .dropdown-menu.pull-right:after
    {
      right : px2Rem(4);
      left  : auto;
    }

    .btn-action
    {
      display          : inline-block;
      font-weight      : 400;
      color            : $body-color;
      text-align       : center;
      vertical-align   : middle;
      user-select      : none;
      background-color : $light-bg-subtle;
      border           : px2Rem(1) solid $light-bg-subtle;
      font-size        : $font-size-base;
      line-height      : $line-height-base;
      transition       : $btn-transition;
      padding          : px2Rem(2) px2Rem(10);
      border-radius    : 45%;

      &:hover,
      &:focus,
      &:active
      {
        color            : $btn-color;
        border           : px2Rem(1) solid $light-bg-subtle;
        background-color : $primary-bg-subtle;
        outline          : none;
      }
    }

    .btn-action:disabled
    {
      cursor : no-drop;
    }

    .btn-action:not(:disabled)
    {
      cursor : pointer;
    }
  }

  // Action icons
  .action-group
  {
    text-align : center;

    .action-icon
    {
      font-size : 120%;
    }
  }

  .action-group:first-child
  {
    margin-left : px2Rem(1);
  }
}
