// This file contains declarations used in the styling of the ecr library (root) page

@use "uswds-core" as *;

// ==== Table styling ===== //

.library-patient-column {
  min-width: 16.3rem;
  width: 18%;
}

.library-received-date-column {
  width: 8.3rem;
  min-width: 8.3rem;
}

.library-encounter-date-column {
  width: 10%;
  min-width: 8.3rem;
}

.library-condition-column {
  min-width: 23rem;
  width: 25%;
}

.library-rule-column {
  min-width: 35.5rem;
  width: auto;
}

.ecr-table-list {
  @include unstyled-list;
  li:not(:first-child) {
    margin-top: 1rem;
  }
}

.table-ecr-library {
  font-size: 1rem;
  border-collapse: separate;
  isolation: isolate;
  min-height: 100%;

  a,
  u {
    text-decoration: none;
  }

  thead {
    box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);

    th {
      background-color: color("base-lighter");
      border-bottom: 1px solid var(--Base-base, #71767a);

      &:first-child {
        padding-left: 2rem;
      }
    }
  }

  tbody {
    isolation: isolate;

    td {
      border-bottom: none;
    }

    tr {
      position: relative;

      &:last-child {
        height: 100%;
      }

      &:first-child td {
        border-top: none;
      }

      &.main-row {
        z-index: 2;

        &:nth-child(odd) td {
          background-color: white;
        }

        &:nth-child(even) td {
          background-color: color("gray-cool-3");
        }

        td:first-child {
          padding-left: 0.25rem;
        }
      }

      &.related-row {
        z-index: 1; // behind main row

        td {
          background-color: #f9f9f9;
          border-top: 1px solid color("base-lighter");

          &:first-child {
            padding-left: 4rem;
          }
        }
      }
    }
  }

  .patient-name-cell {
    display: grid;
    grid-template-columns: 1.75rem auto;
    grid-template-areas: "button content";

    .expand-ecrs-button {
      grid-area: button;
      outline-offset: -0.25rem;
    }

    .patient-name-content {
      grid-area: content;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .expand-icon {
      transition: transform 0.2s ease-in-out;
    }
  }
}

// ==== Page styling ===== //

.ecr-library-wrapper {
  height: calc(100% - 4rem);
}

.ecr-pagination-drop-shadow {
  box-shadow: 0 -0.25rem 0.25rem rgba(0, 0, 0, 0.1);
  z-index: 2;
}

// ==== Filter styling ===== //

.filter-button {
  background-color: color("base-lightest");
  box-shadow: inset 0 0 0 2px color("base-light");
  font-weight: normal;

  span svg {
    fill: color("base-light");
  }

  &:hover {
    background-color: color("base-lighter");
    box-shadow: inset 0 0 0 2px color("base");

    span svg {
      fill: color("base");
    }
  }

  &:active {
    background-color: color("base-lightest");
    box-shadow: inset 0 0 0 2px color("base-light");

    span svg {
      fill: color("base-light");
    }
  }
}

.filters-applied {
  box-shadow: inset 0 0 0 2px color("secondary");
  background-color: color("secondary-lighter");
  font-weight: bold;

  span svg {
    fill: color("secondary");
  }

  &:hover {
    box-shadow: inset 0 0 0 2px color("secondary-dark");
    background-color: color("secondary-light");

    span svg {
      fill: color("secondary-dark");
    }
  }

  &:active {
    box-shadow: inset 0 0 0 2px color("secondary");
    background-color: color("secondary-lighter");

    span svg {
      fill: color("secondary");
    }
  }
}

.checkbox-color .usa-checkbox__label::before {
  box-shadow: 0 0 0 0.125rem color("base");
}

// ==== Sorting styling ===== //

.sort-button {
  border: none;
  transition: none;
  margin-left: auto;
  background-color: transparent;
  text-decoration: none;
  color: inherit;
  font-weight: inherit;
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  &:hover {
    background-color: transparent; /* Removes the hover background */
    color: inherit; /* Keeps the text color unchanged */
    text-decoration: inherit;
  }
  &:active {
    background-color: transparent; /* Keeps the original background color */
    color: inherit; /* Keeps the text color unchanged */
    text-decoration: inherit;
  }
  &:focus {
    background-color: transparent; /* Removes fill after click */
    color: inherit; /* Keeps the text color unchanged */
    text-decoration: inherit;
  }
  &:disabled {
    background-color: transparent; /* Removes fill after click */
    text-decoration: inherit;
    color: color("disabled-light");
  }
  &:disabled:hover {
    background-color: transparent; /* Removes fill after click */
    text-decoration: inherit;
    color: color("disabled-light");
  }
}

.sortable-column,
.sortable-desc-column,
.sortable-asc-column {
  &.usa-button {
    margin-left: auto;
    justify-content: flex-end;
    padding: 12px;
  }
}

.sort-div {
  width: 100%;
  display: flex;
}
