/////////////////////////////////////
// THEME / COMPONENTS / DATATABLES WDN
/////////////////////////////////////

@use "sass:meta";
@use "../variables/" as var;
@use "../mixins/" as mixins;

@layer components {
  @include meta.load-css("../vendor/datatables");

  // For .dcf-form-help, .dcf-label, .dcf-input-text, and .dcf-input-select
  @include meta.load-css("@dcf/scss/components/forms");
  @include meta.load-css("../components/forms");

  // For .dcf-btn and .dcf-btn-secondary
  @include meta.load-css("@dcf/scss/components/buttons");
  @include meta.load-css("../components/buttons");

  :root {
    // RGB version of #d00000
    --dt-row-selected: 208, 0, 0 !important;
  }

  // Puts search and entries per page to be on one line instead of two
  .unl div.dt-container .dt-length {
    display: flex;
    gap: 0.3rem;
    align-items: center;
  }

  // Aligns column text to start
  .unl table.dataTable.unl-dt-cells-align-start td.dt-type-numeric,
  .unl table.dataTable.unl-dt-cells-align-start td.dt-type-date {
    text-align: start !important;
  }

  // Aligns column text to end
  .unl table.dataTable.unl-dt-cells-align-end td.dt-type-numeric,
  .unl table.dataTable.unl-dt-cells-align-end td.dt-type-date {
    text-align: end !important;
  }

  // Aligns heading text to start
  .unl table.dataTable.unl-dt-headers-align-start th.dt-type-numeric,
  .unl table.dataTable.unl-dt-headers-align-start th.dt-type-date {
    text-align: start !important;
  }

  // Aligns heading text to end
  .unl table.dataTable.unl-dt-headers-align-end th.dt-type-numeric,
  .unl table.dataTable.unl-dt-headers-align-end th.dt-type-date {
    text-align: end !important;
  }

  // Aligns sorting arrows to the start of the heading
  .unl table.dataTable.unl-dt-arrows-align-start thead > tr > th div.dt-column-header,
  .unl table.dataTable.unl-dt-arrows-align-start thead > tr > th div.dt-column-footer,
  .unl table.dataTable.unl-dt-arrows-align-start thead > tr > td div.dt-column-header,
  .unl table.dataTable.unl-dt-arrows-align-start thead > tr > td div.dt-column-footer,
  .unl table.dataTable.unl-dt-arrows-align-start tfoot > tr > th div.dt-column-header,
  .unl table.dataTable.unl-dt-arrows-align-start tfoot > tr > th div.dt-column-footer,
  .unl table.dataTable.unl-dt-arrows-align-start tfoot > tr > td div.dt-column-header,
  .unl table.dataTable.unl-dt-arrows-align-start tfoot > tr > td div.dt-column-footer {
    display: flex;
    justify-content: space-between;
    align-items: start !important;
    gap: 0.5rem !important;
    flex-direction: start !important;
  }

  // Aligns sorting arrows to the end of the heading
  .unl table.dataTable.unl-dt-arrows-align-end thead > tr > th div.dt-column-header,
  .unl table.dataTable.unl-dt-arrows-align-end thead > tr > th div.dt-column-footer,
  .unl table.dataTable.unl-dt-arrows-align-end thead > tr > td div.dt-column-header,
  .unl table.dataTable.unl-dt-arrows-align-end thead > tr > td div.dt-column-footer,
  .unl table.dataTable.unl-dt-arrows-align-end tfoot > tr > th div.dt-column-header,
  .unl table.dataTable.unl-dt-arrows-align-end tfoot > tr > th div.dt-column-footer,
  .unl table.dataTable.unl-dt-arrows-align-end tfoot > tr > td div.dt-column-header,
  .unl table.dataTable.unl-dt-arrows-align-end tfoot > tr > td div.dt-column-footer {
    display: flex;
    justify-content: space-between;
    align-items: end !important;
    gap: 0.5rem !important;
    flex-direction: row !important;
  }

  // Small text showing number of entries under table
  .unl .dt-info {
    @extend .dcf-form-help;
  }

  // Pagination buttons
  .unl div.dt-container .dt-paging button.dt-paging-button {
    @include mixins.txt-xs;
    @extend .dcf-btn;
    @extend .dcf-btn-secondary;

    // They use !important for their button styles so we need to fix the styles harder
    background: transparent !important;
    background-color: var.$bg-color-button-secondary !important;
    color: var.$color-button-secondary !important;
  }

  .unl div.dt-container .dt-paging button.dt-paging-button:not(.current) {
    border-color: var.$border-color-button-secondary !important;
    border-width: 2px !important;
    border-style: solid !important;
  }

  // Space between buttons
  .unl div.dt-container .dt-paging button.dt-paging-button:not(:last-child){
    margin-right: .56em;
  }

  .unl div.dt-container .dt-paging button.dt-paging-button:not(.current):not(:disabled):hover,
  .unl div.dt-container .dt-paging button.dt-paging-button:not(.current):not(:disabled):active {
    background-color: var.$bg-color-button-secondary-tertiary-hover !important;
    color: var.$color-button-secondary-tertiary-hover !important;
  }

  .unl div.dt-container .dt-paging button.dt-paging-button:focus-visible {
    box-shadow: 0 0 0 3px var.$bg-color-body, 0 0 0 5px var.$border-color-input-focus !important;
  }

  .unl div.dt-container .dt-paging button.dt-paging-button:active{
    box-shadow: 0 0 0 3px var.$bg-color-body, 0 0 0 5px currentColor !important;
  }

  // Disabled buttons are not actually disabled so we have to apply the disabled styles
  .unl div.dt-container .disabled {
    cursor: not-allowed !important;
    opacity: .75 !important;
  }

  // Match the current pagination styles
  .unl div.dt-container .current {
    border-color: transparent !important;
    border-style: none !important;
    border-width: 0px !important;
    opacity: .75 !important;
  }

  .unl div.dt-container .dt-paging .ellipsis {
    padding: 0 0.5em;
  }

  // Using sass to add the dcf-label class to the labels
  .unl .dt-search label,
  .unl .dt-length label {
    @extend .dcf-label;
  }

  // Using sass to add the dcf-input-text class to the search input
  .unl .dt-search .dt-input {
    
    @include mixins.d-inline;
    @extend .dcf-input-text;
  }

  .unl .dt-container:has(table.unl-dt-inputs-sm) .dt-search .dt-input {
    @include mixins.txt-sm;
  }

  // Using sass to add the dcf-input-select class to the select
  .unl .dt-length select.dt-input {
    @include mixins.w-10;
    @include mixins.d-inline-block;
    @extend .dcf-input-select;
  }

  .unl .dt-container:has(table.unl-dt-inputs-sm) .dt-length select.dt-input {
    @include mixins.txt-sm;
  }

  .unl .dt-buttons button.dt-button {
    @extend .dcf-btn;
    @extend .dcf-btn-primary;
    background-image: none !important;
    background-color: var.$bg-color-button-primary !important;
    margin: 0px !important;
  }

  .unl .dt-container:has(table.unl-dt-inputs-sm) .dt-buttons button.dt-button  {
    @include mixins.txt-xs;
  }

  .unl .dt-buttons button.dt-button:hover {
    border-width: 2px !important;
    border-style: solid !important;
    background-color: var.$bg-color-button-primary-hover !important;
    border-color: var.$border-color-button-primary-hover !important;
  }

  .unl tr .dtr-control {
    position: relative;
  }

  .unl tr .dtr-control::before {
    position: absolute;
    margin-left: 1rem;
    left: 0px;
    top: 25%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
  }

  .unl tr:not(.dtr-expanded) .dtr-control::before {
    border-left-color: var.$bg-color-button-primary !important;
  }

  .unl tr.dtr-expanded .dtr-control::before {
    border-top-color: var.$bg-color-button-primary !important;
  }
}