/**
Delimiters
Delimiters used by us
- CamelCase
Delimiters used by datatables
- dashes
- underscores
*/

.yasr {
  .tableControls {
    display: flex;
    align-items: center;
    padding: 0px;
    padding-right: 5px;
    flex-wrap: wrap;

    .tableFilter {
      margin-right: 10px;
      height: 100%;
    }

    .tableSizer {
      height: 100%;
    }
    .switch {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  }
  .dataTable.ellipseTable {
    white-space: nowrap;
    div:not(.expanded) {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .dataTable:not(.ellipseTable) {
    div:not(.expanded) {
      word-break: break-all;
    }
  }
  .expanded {
    white-space: normal;
    word-break: break-all;
  }
  .expandable:not(.expanded) {
    cursor: pointer;
    a {
      pointer-events: none;
    }
  }

  .dataTables_wrapper {
    font-size: 0.9em;
    min-width: 100%;
    .grip-container {
      max-width: 100%;
    }
    .grip-padding > tbody > tr > td,
    .grip-padding > tbody > tr > th {
      padding-left: 7px !important;
      padding-right: 5px !important;
    }
    .dataTable {
      min-width: 100%;
      box-sizing: border-box;
      // Override border-bottom datatables styling
      &.no-footer {
        border-bottom: none;
      }

      tbody tr:hover {
        background-color: #f9f9f9;
      }

      thead tr th {
        //cannot select text anyway (as headers are buttons as well)
        //By setting it to none explicitly, we won't have issues when resizing columns _and_ selecting text at the meantime
        user-select: none;
        font-weight: bold;
        text-align: start;
        overflow: hidden;
        text-overflow: ellipsis;
        border: none;
        padding: 5px;
        padding-left: 7px;
        min-width: 28px;
        &.sorting {
          min-width: 10px;
          padding-right: 18px; //space for sort icon
        }
        &:hover {
          background-color: #f9f9f9;
        }
      }

      td {
        padding: 5px;
        & > div {
          hyphens: auto;
          &.rowNumber {
            word-break: keep-all;
            overflow: visible;
          }
        }
        .tableEllipse {
          cursor: pointer;
          font-weight: bold;
          padding: 0 2px;
          background-color: #428bca33;
          border-radius: 2px;
          margin: 0 3px;
        }
      }
    }

    /**
      Selector for pagination element
    */
    div.dataTables_paginate.paging_simple_numbers {
      a.paginate_button {
        border: none;
        background: transparent;

        // When the buttons are disabled show the default YASR disabled color
        .disabled {
          color: #505050;
        }

        &.current {
          border: none;
          background: transparent;
          text-decoration: underline !important; // dataTables made the text-decoration important
        }

        &:hover {
          border: none;
          background: transparent;

          // Don't override the disabled grayed out style
          &:not(.disabled) {
            color: black !important; // dataTables made the color important
          }
        }

        &:active {
          box-shadow: none;
        }
      }
    }
  }
}