@import 'variables';
@import 'theme-colors';

.theme-datatable {
  // Border color and font color
  table, thead, tbody, tfoot tr, th, td {
    color: var(--default-font-color) !important;
    border-color: var(--default-border-color) !important;
  }

  &.default-table {
    // Border
    thead {
      th {
        border-top: none !important;
        border-bottom: none !important;
      }
    }

    tfoot {
      th {
        border-bottom: none !important;
      }
    }

    // Filter
    .dataTables_filter {
      display: flex;
      justify-content: flex-end;
    }

    .dataTables_length {
      display: flex;
      justify-content: flex-start;
    }

    // Show items and pagination
    .dataTables_info {
      text-align: start !important;
    }

    .dataTables_paginate {
      .paginate_button {
        &.disabled {
          .page-link {
            color: #6c757d !important;
          }
        }

        .page-link {
          color: var(--default-font-color) !important;
          background: transparent !important;
          border-color: var(--default-border-color) !important;

          &:focus {
            box-shadow: none !important;
          }
        }

        &:hover {
          .page-link {
            background-color: var(--icon-hover-bg) !important;
            color: $brand-color !important;
          }
        }

        &.active {
          .page-link {
            background: $brand-color !important;
            color: $white !important;
          }
        }
      }
    }
  }

  &.export-table {
    // Export buttons
    .dt-buttons {
      .dt-button {
        margin: 0 !important;
        background: transparent !important;
        color: var(--default-font-color) !important;
        border-color: var(--default-border-color) !important;
        border-radius: $default-radius !important;

        &:hover {
          color: $brand-color !important;
          background: var(--icon-hover-bg) !important;
        }

        &:focus {
          text-shadow: none !important;
        }

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

    // Border
    thead {
      th {
        border-top: none !important;
        border-right: none !important;

        &:first-child {
          border-left: none !important;
        }
      }
    }

    tbody {
      tr {
        background: transparent !important;

        td {
          background: transparent !important;
          border-bottom: none !important;
          border-right: none !important;

          &:first-child {
            border-left: none !important;
          }
        }
      }
    }

    tfoot {
      th {
        border-bottom: none !important;
        border-right: none !important;

        &:first-child {
          border-left: none !important;
        }
      }
    }

    // Search filter
    input[type='search'] {
      outline: none;
      line-height: 1.5;
      font-weight: 400;
      font-size: 100% !important;
      background-clip: padding-box;
      border-radius: 5px !important;
      color: var(--default-font-color);
      background-color: var(--form-control-bg);
      padding: $default-input-box-padding !important;
      border-color: var(--default-border-color) !important;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

      &:focus {
        box-shadow: none;
        color: var(--default-font-color);
        background-color: var(--form-control-bg);
        border-color: $inputs-focus-color !important;
      }
    }

    // Show item and pagination
    .dataTables_info {
      color: var(--default-font-color) !important;
    }

    .dataTables_paginate {
      .paginate_button {
        border: none !important;
        background: none !important;
        color: var(--default-font-color) !important;

        &:hover {
          color: $brand-color !important;
          background-color: var(--icon-hover-bg) !important;
        }

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

        &.disabled {
          color: #6c757d !important;
        }

        &.current {
          color: $white !important;
          background-color: $brand-color !important;
        }
      }
    }
  }
}
