@use "../theme.scss" as *;

.data-list {
  margin-bottom: $block-elem-vertical-gap;
  background-color: $data-list-bg-color;

  h1,
  h2,
  h3,
  h4 {
    color: inherit;
  }

  .data-list-header {
    background-color: $data-list-header-bg-color;
  }

  .data-list-footer {
    background-color: $data-list-footer-bg-color;
  }

  .data-list-body {
    width: 100%;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-top-color: $data-list-border-color;
    border-bottom-color: $data-list-border-color;
    list-style: none;
  }

  .data-list-item {
    min-height: 3em;
    position: relative;
    color: $data-list-item-color;
    &.selected {
      color: $data-list-item-selected-color;
      background-color: $data-list-item-bg-selected-color;
    }
    &.disabled {
      cursor: default;
      opacity: $data-list-item-disabled-opacity;
    }
    &.selectable {
      outline: none;
      &:not(.disabled) {
        cursor: pointer;
        &:hover,
        &:focus-visible,
        &.focused {
          color: $data-list-item-hover-color;
          background-color: $data-list-item-bg-hover-color;
        }
        &.selected:hover,
        &.selected:focus-visible,
        &.selected.focused {
          color: $data-list-item-selected-hover-color;
          background-color: $data-list-item-selected-hover-bg-color;
        }
      }
      &.disabled {
        cursor: default;
      }
    }
  }

  &.divider {
    & .data-list-item {
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: $data-list-item-divider-border-color;
      &:last-of-type {
        border-bottom: 0;
      }
    }
  }

  &.no-border {
    & .data-list-body {
      border: 0;
    }
  }

  // (item-selectability & item-hover-highlight) Same as .data-list-item.selectable, but for all items
  &.item-selectability .data-list-item {
    outline: none;
    &:not(.disabled) {
      cursor: pointer;
    }
    &.disabled {
      cursor: default;
    }
  }

  &.item-hover-highlight .data-list-item {
    outline: none;
    &:not(.disabled) {
      &:hover,
      &:focus-visible,
      &.focused {
        color: $data-list-item-hover-color;
        background-color: $data-list-item-bg-hover-color;
      }
      &.selected:hover,
      &.selected:focus-visible,
      &.selected.focused {
        color: $data-list-item-selected-hover-color;
        background-color: $data-list-item-selected-hover-bg-color;
      }
    }
  }

}