import t, { css as n } from "styled-components";
import { getColorAlias as r, getSpacing as o, getFontSize as i, getModifiedColorByThemeMode as l, convertToTransientProps as a } from "../../utils/index.js";
const c = t.div`
  display: flex;
  flex-flow: column;
  overflow: hidden;
  border-radius: ${(e) => e.theme.radius.roundedC};
  border: 1px solid ${r("borderDefault")};
  background-color: ${r("containerDefault")};
  color: ${r("contentDefault")};
`, g = t.header`
  display: flex;
  flex-flow: column;
  padding: ${o("s04")};

  ${({ headerVariant: e }) => e === "strong" && n`
      background-color: ${r("supportBrand02")};
    `};

  h2 {
    ${({ variant: e }) => e === "wide" ? i("size24") : i("size20")}
    margin: unset;
  }

  p {
    margin: ${o("s02")} 0 0 0;
  }
`, p = t.div`
  display: block;
  overflow-x: auto;

  ${({ theme: e }) => e.mode === "light" && n`
      /* Shadow if content is scrollable */
      background: linear-gradient(to right, white, white),
        linear-gradient(to right, white, white),
        linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3)),
        linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3));

      background-position: left center, right center, left center, right center;
      background-repeat: no-repeat;
      background-color: white;
      background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
      background-attachment: local, local, scroll, scroll;
    `};
`, h = t.table`
  border-collapse: collapse;
  width: 100%;

  th,
  td {
    ${i("size16")}
    padding: ${o("s04")};
    border-bottom: 1px solid ${r("borderDefault")};
  }

  tr {
    &:hover:not(thead > tr) {
      background-color: ${l(
  "hover01",
  "containerDefault"
)};
    }

    &[data-selected=\"true\"] {
      background-color: ${r("containerStrong")};
    }

    &[data-disabled=\"true\"] {
      color: ${r("contentDisabled")};
    }
  }
`, f = t.th.withConfig({
  shouldForwardProp: a(["textAlign", "columnWidth"])
})`
  text-align: ${({ textAlign: e }) => e || "left"};
  width: ${({ columnWidth: e }) => e || "auto"};
  cursor: ${({ onClick: e }) => e ? "pointer" : "default"};
`, u = t.td.withConfig({
  shouldForwardProp: a(["textAlign", "verticalAlign"])
})`
  text-align: ${({ textAlign: e }) => e || "left"};
  vertical-align: ${({ verticalAlign: e }) => e || "top"};
`, b = t.div`
  display: flex;
  justify-content: space-between;
  max-height: 48px;
  width: 100%;
  align-items: center;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    height: inherit;
    width: inherit;
  }

  svg {
    margin-left: ${o("s02")};
    min-height: 20px;
    min-width: 20px;
  }
`, $ = t.span`
  width: 40px;
  padding: calc(${o("s04")} + 2px) 0 ${o("s04", "s04")} !important;
`, x = t.div`
  ${i("size16")}
  display: flex;
  background-color: ${r("containerInverse")};
  color: ${r("contentInverse")};
  padding: ${o("s02", "s04")};
  align-items: center;
  justify-content: space-between;
`, m = t.div`
  ${i("size16")}
`, w = t.div`
  display: flex;

  button:not(:last-child) {
    margin-right: ${o("s04")};
  }
`, v = t.footer`
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: ${o("s02", "s04")};
`, k = t.div`
  ${i("size14")}
  margin-right: ${o("s04")};
`;
export {
  x as ActionBar,
  w as ActionButtons,
  $ as CheckboxCell,
  c as DataTableWrapper,
  v as Footer,
  g as Header,
  p as ResponsiveTableWrapper,
  k as ResultsArea,
  m as SelectedItemsInfo,
  h as Table,
  u as Td,
  f as Th,
  b as ThContainer
};
