 // Variables
 // ---------------------
 $table-header-font-weight: 600;
 $table-header-font-color: #757575;

 $table-cell-padding: 1rem;
 $table-condensed-cell-padding: $table-cell-padding/2;


 $table-bg: transparent;
 $table-bg-accent: #f5f5f5;
 $table-bg-hover: rgba(0, 0, 0, .12);
 $table-bg-active: $table-bg-hover;
 $table-border-color: #e0e0e0;

 // Mixins
 // -----------------
 @mixin transition($transition) {
   -webkit-transition: $transition;
   -o-transition: $transition;
   transition: $transition;
 }


 .wp-ulike-gopro-menu-link {
   &::before {
     content: '';
     background-image: url(../../../assets/img/svg/rocket.svg);
     background-repeat: no-repeat;
     background-size: cover;
     display: inline-block;
     width: 18px;
     height: 18px;
     vertical-align: middle;
   }

   strong {
     padding: 0 5px;
   }
 }

 .wp-ulike-simple-table {
   width: 100%;
   max-width: 100%;
   margin-bottom: 2rem;
   background-color: $table-bg;

   >thead,
   >tbody,
   >tfoot {
     >tr {
       @include transition(all .3s ease);

       >th,
       >td {
         text-align: left;
         padding: $table-cell-padding;
         vertical-align: top;
         border-top: 0;
         @include transition(all .3s ease);
       }
     }
   }

   >thead>tr>th {
     font-weight: $table-header-font-weight;
     color: $table-header-font-color;
     vertical-align: bottom;
     border-bottom: 1px solid rgba(0, 0, 0, .12);
   }

   >caption+thead,
   >colgroup+thead,
   >thead:first-child {
     >tr:first-child {

       >th,
       >td {
         border-top: 0;
       }
     }
   }

   >tbody+tbody {
     border-top: 1px solid rgba(0, 0, 0, .12);
   }

   // Nesting
   .table {
     background-color: $table-bg;
   }

   // Remove border
   .no-border {
     border: 0;
   }

   &.table-bordered {
     border: 0;

     >thead,
     >tbody,
     >tfoot {
       >tr {

         >th,
         >td {
           border: 0;
           border-bottom: 1px solid $table-border-color;
         }
       }
     }

     >thead>tr {

       >th,
       >td {
         border-bottom-width: 2px;
       }
     }
   }

   .wp-ulike-table-icon {
     width: 18px;
     height: 18px;
   }
 }

 .column-wp-ulike-thumbs-up,
 .column-wp-ulike-thumbs-down {
   width: 110px;
 }

 .wp-ulike-counter-box {
   font-size: 1.3em;
   line-height: 1.3em;
   font-weight: 500;
 }

 .wp-ulike-btn-is-loading {
   position: relative;

   .wp-ulike-text {
     visibility: hidden;
   }

   &:before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 100%;
     transform: translateX(-50%) translateY(-50%);
     background-image: url(../../../assets/img/svg/button-spinner.svg);
     z-index: 9;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 60% 60%;
   }
 }

 .wp-ulike-container {
  .tablenav {
    .tablenav-pages {
      color: #444;
      font-size: 14px;

      .pagination-links {
        a.page-numbers,
        span.page-numbers {
          display: inline-block;
          padding: 4px 8px;
          margin: 0 2px;
          line-height: 1.65;
          border: 1px solid #ddd;
          border-radius: 4px;
          background-color: #f7f7f7;
          color: #0071a1;
          text-decoration: none;
          box-shadow: 0 1px 0 rgba(0,0,0,0.05);
          transition: all 0.2s ease-in-out;
          cursor: pointer;

          &:hover,
          &.current {
            border-color: #0073aa;
            background-color: #0073aa;
            color: #ffffff;
            box-shadow: 0 1px 8px rgba(0,0,0,0.1);
          }

          &:focus {
            outline: none;
            box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
          }
        }


        span.page-numbers.dots {
          background-color: transparent;
          border: none;
          box-shadow: none;
        }
      }

      .displaying-num {
        margin-right: 10px;
        font-weight: 600;
      }
    }
  }
}
