.noora-table {
  box-sizing: border-box;
  border-radius: var(--noora-radius-8);
  background: var(--noora-surface-table-header);
  padding: var(--noora-spacing-2);
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: none;
  scroll-padding-right: var(--noora-spacing-2);

  & table {
    position: relative;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    min-width: max-content;

    /* Table elements do not support `box-shadow`, which we are using for borders. In order to still have a shadow around the body, we are
    *  adding a pseudo element with standard layouting around the table and add a box-shadow around it. */
    &:has(td):after {
      position: absolute;
      top: 40px;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      box-shadow: var(--noora-border-light-default);
      border-radius: var(--noora-radius-6);
      pointer-events: none;
      content: "";
    }

    & tbody {
      background: transparent;

      /* Using `overflow` set to `auto` or `scroll`, most browsers collapse the right padding when overflowing. This visually removes the
      *  border around the body, which is unintended. To solve this, we are adding a pseudo element of the width of the padding to
      *  the right of the table. This does not get collapsed and serves as a padding. */
      &:after {
        display: block;
        position: absolute;
        right: calc(var(--noora-spacing-2) * -1);
        width: var(--noora-spacing-2);
        height: 1px;
        pointer-events: none;
        content: "";
      }

      & tr {
        &[data-expanded] td {
          background-color: var(--noora-surface-background-secondary);
        }
        &[data-expandable] {
          cursor: pointer;

          &:hover td {
            background-color: var(--noora-surface-background-secondary);
          }
        }

        &:hover {
          & td[data-selectable] {
            background: var(--noora-surface-background-secondary);
            cursor: pointer;
          }
        }

        & td {
          background-color: var(--noora-surface-background-primary);

          & > [data-part="expand-cell"] {
            display: flex;
            align-items: center;
            gap: var(--noora-spacing-5);
            padding-left: var(--noora-spacing-5);
            & > svg {
              flex-shrink: 0;
              width: 16px;
              height: 16px;
            }
          }

          & > [data-part="expand-cell"] > [data-part="cell"] {
            padding-left: 0;
          }

          &[data-part="expanded-content"] {
            position: relative;
            background-color: var(--noora-surface-background-secondary);
            padding-left: var(--noora-spacing-8);

            &::before {
              position: absolute;
              top: 0;
              bottom: 0;
              left: var(--noora-spacing-7);
              background-color: var(--noora-surface-border-primary);
              width: 1px;
              content: "";
            }
          }
        }
      }

      & tr:not(:first-child):not([data-part="expanded-row"]) td {
        box-shadow: 0 1px 0 0
          light-dark(
            var(--noora-neutral-light-400),
            var(--noora-neutral-dark-900)
          )
          inset;
      }

      & tr:not(:last-child) td {
        padding-bottom: 2px;
      }

      & tr:not(:first-child) td {
        padding-top: 2px;
      }

      /* Border radius on the `tbody` itself is unsupported, so we're selectively adding radius to specific cells. */
      & tr:first-child {
        & td:first-child {
          border-top-left-radius: var(--noora-radius-6);
        }
        & td:last-child {
          border-top-right-radius: var(--noora-radius-6);
        }
      }

      & tr:last-child {
        & td:first-child {
          border-bottom-left-radius: var(--noora-radius-6);
        }
        & td:last-child {
          border-bottom-right-radius: var(--noora-radius-6);
        }
      }
    }
  }

  & th {
    position: sticky;
    top: 0;
    background-color: var(--noora-surface-table-header);
    padding: var(--noora-spacing-4) var(--noora-spacing-7)
      var(--noora-spacing-5) var(--noora-spacing-7);
    color: var(--noora-surface-label-primary);
    font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
    text-align: left;
    white-space: nowrap;

    & > [data-part="sort-link"] {
      color: unset;
      text-decoration: unset;

      &:hover [data-part="icon"] {
        color: var(--noora-surface-label-primary);
      }
    }

    & [data-part="icon"] {
      display: inline-block;
      position: relative;
      top: 2.5px;
      left: var(--noora-spacing-2);
      width: var(--noora-icon-size-medium);
      height: var(--noora-icon-size-medium);
      /* We cannot make `th` a flex element for vertical alignment and `gap`, so we are using `top` to vertically align, and `left` for
      * spacing. */
      color: var(--noora-surface-label-secondary);

      & svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  & [data-part="link"] {
    text-decoration: none;
  }

  & [data-part="cell"] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;

    &[data-type="text"] {
      display: flex;
      align-items: center;
      gap: var(--noora-spacing-2);
      padding: var(--noora-spacing-7);
      font: var(--noora-font-body-medium);

      & [data-part="icon"] {
        display: inline-flex;
        width: var(--noora-icon-size-medium);
        height: var(--noora-icon-size-medium);
        color: var(--noora-surface-label-primary);

        & svg {
          width: 100%;
          height: 100%;
        }
      }

      & [data-part="label"] {
        color: var(--noora-surface-label-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      & [data-part="sublabel"] {
        color: var(--noora-surface-label-secondary);
      }
    }

    &[data-type="text_and_description"] {
      display: flex;
      align-items: center;
      gap: var(--noora-spacing-5);
      padding: var(--noora-spacing-5) var(--noora-spacing-7)
        var(--noora-spacing-5) var(--noora-spacing-5);

      & [data-part="icon"] {
        display: flex;
        border-radius: var(--noora-radius-4);
        color: var(--noora-surface-label-primary);

        &:not(:has(img)) {
          box-shadow: var(--noora-border-light-default);
          padding: 10px;
        }

        & img {
          border-radius: var(--noora-radius-4);
          width: 40px;
          height: 40px;
        }

        & svg {
          width: var(--noora-icon-size-large);
          height: var(--noora-icon-size-large);
        }
      }

      & [data-part="column"] {
        display: flex;
        flex-direction: column;
        gap: var(--noora-spacing-2);
      }

      & [data-part="label"] {
        color: var(--noora-surface-label-primary);
        font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
      }

      & [data-part="description"] {
        color: var(--noora-surface-label-secondary);
        font: var(--noora-font-body-small);
      }
    }

    &[data-type="badge"],
    &[data-type="status_badge"],
    &[data-type="button"],
    &[data-type="link_button"],
    &[data-type="tag"] {
      padding: var(--noora-spacing-7);
    }

    &[data-type="button"] {
      display: flex;
      gap: var(--noora-spacing-4);
    }
  }

  & .noora-table-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--noora-spacing-10) var(--noora-spacing-0);

    & > [data-part="icon"] {
      margin-bottom: var(--noora-spacing-8);
      box-shadow: var(--noora-border-light-default);
      border-radius: var(--noora-radius-3);
      background: var(--noora-surface-background-primary);
      padding: var(--noora-spacing-3);
      width: var(--noora-icon-size-large);
      height: var(--noora-icon-size-large);
      color: var(--noora-surface-label-primary);

      & svg {
        width: 100%;
        height: 100%;
      }
    }

    & > [data-part="title"] {
      color: var(--noora-surface-label-secondary);
      font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
    }

    & > [data-part="subtitle"] {
      margin-top: var(--noora-spacing-4);
      color: var(--noora-surface-label-tertiary);
      font: var(--noora-font-body-small);
    }
  }
}