@use "../../../1-settings/class-vars";

#{class-vars.$base-class} {
  //this doesn't nest under table so it has to be written like this
  .table__wrapper {
    overflow-x: auto;

    &--full-width {
      width: 100%;
    }
  }
  table {
    border-collapse: collapse;
    thead {
      border-bottom: 1px solid var(--gray-color);
      tr {
        th {
          text-align: left;
          vertical-align: middle;
          font-weight: bold;
          padding: var(--spacing-s);
          line-height: 1.2;
          &.text-center {
            text-align: center;
          }
          &.text-right {
            text-align: right;
          }
        }
      }
    }
    tbody {
      tr {
        td {
          vertical-align: top;
          padding: var(--spacing-s);
          background: white;
        }
      }
      tr:last-child {
        td {
          border-bottom: 1px solid var(--gray-color);
        }
      }
    }
    tfoot {
      tr {
        td {
          vertical-align: top;
          padding: var(--spacing-s);
          font-weight: bold;
        }
      }
    }
    &.table {
      &--alt {
        tbody {
          tr:nth-child(2n) {
            td {
              background-color: #f5f5f5;
            }
          }
          tr:nth-child(2n-1) {
            td {
              background-color: white;
            }
          }
        }
      }
      &--lines-x {
        tbody {
          tr {
            td {
              border-bottom: 1px solid var(--gray-3-1-contrast);
            }
          }
          tr:last-child {
            td {
              border-bottom: 1px solid var(--gray-color);
            }
          }
        }
      }
      &--lines-y {
        tbody {
          tr {
            td {
              border-left: 1px solid var(--gray-3-1-contrast);
              border-right: 1px solid var(--gray-3-1-contrast);
            }
          }
        }
      }
      &--v-align-center {
        tbody {
          tr {
            td {
              vertical-align: middle;
            }
          }
        }
      }
      &--condensed {
        thead {
          tr {
            th {
              padding: var(--spacing-2xs) var(--spacing-xs);
            }
            th.table-header--sortable {
              padding: 0;
            }
          }
        }
        tbody {
          tr {
            td {
              padding: var(--spacing-2xs) var(--spacing-xs);
            }
          }
        }
        &.table-header--sortable {
          button {
            padding: var(--spacing-s) var(--spacing-xs);
          }
          thead {
            tr {
              th.table-header--sortable {
                padding: 0;
              }
            }
          }
        }
      }
      &--full-width {
        width: 100%;
      }
      &--td-center {
        thead {
          tr {
            th {
              text-align: center;
            }
          }
        }
        tbody {
          tr {
            td {
              text-align: center;
            }
          }
        }
      }
    }

    .table-header {
      position: relative;

      /* Table Sorting */
      &--sortable {
        padding: 0;
        button {
          border: none;
          background: none;
          border-radius: var(--radius-circle);
          justify-content: flex-start;
          padding: var(--spacing-s) var(--spacing-s);
          width: 100%;
          font-weight: bold;
          line-height: 1.2;
          &:hover {
            background: var(--gray-light-color);
            color: var(--primary-color);
          }
          &:focus-visible {
            outline-offset: -2px;
          }
        }
      }
      &__cell {
        position: relative;
        &--sort-ascending {
          &::after {
            transform: rotate(180deg);
          }
        }
      }
      &--sorted {
        &::before {
          content: "";
          height: 7px;
          width: 100%;
          background: var(--primary-color);
          display: block;
          position: absolute;
          left: 0;
          bottom: -4px;
          border-radius: var(--radius-circle);
          z-index: 1;
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9.7'%3e%3cpath d='m8 9.7-8-8L1.7 0 8 6.3 14.3 0 16 1.7l-8 8Z' fill='white'/%3e%3c/svg%3e");
          background-color: var(--primary-color);
          background-repeat: no-repeat;
          background-size: 9px;
          background-position: center;
          border-radius: var(--radius-circle);
          bottom: -8px;
          left: calc(50% - (15px / 2));
          height: 15px;
          width: 15px;
          z-index: 2;
        }
        button {
          color: var(--primary-color);
        }
      }

      /* Table Filters */
      &__row {
        &--filters {
          th {
            background-color: var(--gray-light-color);
            padding: var(--spacing-s) var(--spacing-2xs);
            &.table-header__cell--filter-date {
              & > div:not(.table-filter-date__popup) {
                button{
                  &:not(.text-input__clear-button) {
                    border-width: 1px;
                    box-shadow: var(--hover-gray-color) 0 0 0 0;
                    transition: box-shadow var(--timing-xquick) ease-in-out;
                    white-space: nowrap;
                    padding-left: var(--spacing-2xs);
                    width: 100%;
                    &:hover {
                      box-shadow: var(--hover-gray-color) 0 0 0 5px;
                      border-color: black;
                      background: white;
                      color: var(--gray-color);
                    }

                    & + .date-input__calendar-icon {
                      pointer-events: none;
                      margin-right: var(--spacing-2xs);
                    }

                    &.table-header__cell--filter-date--is-empty {
                      color: var(--form-ele-placeholder-color);
                      justify-content: flex-start;
                      padding-left: var(--spacing-xs);
                      &:hover {
                        color: var(--form-ele-placeholder-color);
                      }
                    }
                  }
                  &.text-input__clear-button {
                    margin-top: var(--spacing-3xs);
                  }

                  .date-input__icon-static {
                    &::before {
                      font-size: .75rem;
                      margin: 0;
                    }
                  }
                }
              }

              .table-filter-date__popup {
                .popup__close-button {
                  position: absolute;
                  right: 0;
                  top: 0;
                }
              }

              .table-filter-date-popup__selected-date-chiclets {
                display: flex;
                flex-direction: row;
                margin: 0.5rem 0 -0.5rem;
                padding: 0 0.25rem;
                .table-filter-date-popup__selected-date-chiclet {
                  flex: 1;
                  &--selected {
                    height: 0.25rem;
                    background-color: var(--primary-color);
                    border-radius: 13px 13px 0 0;
                  }
                }
              }
            }
          }
          th:first-child {
            border-top-left-radius: var(--radius-medium);
            border-bottom-left-radius: var(--radius-medium);
            padding: var(--spacing-s) var(--spacing-2xs) var(--spacing-s) var(--spacing-s);
          }
          th:last-child {
            border-top-right-radius: var(--radius-medium);
            border-bottom-right-radius: var(--radius-medium);
            padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-2xs);

            & > div:not(.table-filter-date__popup) button:not(.text-input__clear-button) + .date-input__calendar-icon,
            & > div:not(.table-filter-date__popup) button.text-input__clear-button {
              margin-top: 0;
              margin-right: calc(var(--spacing-s) + var(--spacing-2xs));
            }
          }

          // target just the filter inputs in the `th`; nested popups (like date range filter) still show their labels
          th > .input-wrapper {
            label {
              /* visually hidden */
              border: 0;
              clip: rect(0 0 0 0);
              height: 1px;
              margin: -1px;
              overflow: hidden;
              padding: 0;
              position: absolute;
              width: 1px;
            }
          }
          .input-wrapper {
            margin: 0;
            input[type="text"] {
              border-radius: var(--radius-circle);
            }
            select {
              border-radius: var(--radius-circle);
              padding: 0 var(--spacing-l) 0 var(--spacing-xs);
            }
          }
        }
      }
    }
  }

  // Other table class elements
  .table {
    &__no-results-td {
      text-align: center;
    }
    &__no-results-text {
      display: block;
      background: var(--gray-light-color);
      padding: var(--spacing);
      margin: var(--spacing);
      border-radius: var(--radius-small);
    }
  }
}