@use "sass:map";
@use "./config";
@use "../../../styles/tokens/color";
@use "../../../styles/tokens/space";
@use "../../../styles/tools/generate";
@use "../../../styles/typography/config" as typography;

@mixin base {
  width: 100%;
  margin-bottom: space.get("large");
  color: var(--color-text-default);
}

@mixin cells {
  padding: space.get("medium");
  vertical-align: middle;
  @include generate.responsive-css-map(
    map.get(typography.$body-text, "default")
  );
}

@mixin header-cells {
  vertical-align: bottom;
  text-align: left;
  border-bottom: config.$fat-border-size solid var(--color-border-contrast);
  font-weight: 700;
}

@mixin rows {
  line-height: space.get("medium");
  border-bottom: config.$normal-border-size solid var(--color-border-strong);
}

@mixin header-rows {
  border-bottom-width: config.$fat-border-size;
}

@mixin body-header-cells {
  font-weight: 400;
}

@mixin body-sibling {
  border-top: config.$fat-border-size solid var(--color-border-strong);
}

@mixin footer-rows {
  border-bottom-width: 0;
  border-top: config.$fat-border-size solid var(--color-border-contrast);

  &:not(:first-child) {
    border-top-color: var(--color-border-strong);
  }
}

@mixin odd-row {
  background-color: config.$striped-color;
}

@mixin scrollable-wrapper {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  td,
  th {
    white-space: nowrap;
  }
}

@mixin sort-button {
  position: relative;
  display: inline-block;
  width: space.get();
  height: space.get();
  vertical-align: bottom;
  cursor: pointer;
}

@mixin sort-arrows-base {
  content: "";
  position: absolute;
  left: space.get("xsmall");
  border-left: config.$arrow-size solid transparent;
  border-right: config.$arrow-size solid transparent;
  transition: opacity 0.1s ease 0s;
}

@mixin sort-arrow-up {
  top: 4px;
  border-bottom: config.$arrow-size solid var(--color-border-contrast);
}

@mixin sort-arrow-down {
  top: 12px;
  border-top: config.$arrow-size solid var(--color-border-contrast);
}

@mixin sorted-arrow {
  opacity: 0.3;
}

@mixin subrow {
  background-color: var(--color-surface-subtle);
}

@mixin expanded-icon {
  transform: rotate(180deg);
}

@mixin expand-padding {
  padding-top: 4px !important;
  padding-bottom: 0 !important;
}

@mixin compact {
  width: auto;
}

@mixin responsive-table {
  thead {
    display: none;
  }

  tbody,
  tbody tr,
  tbody td {
    display: block;
  }

  tbody tr {
    padding: space.get("small") 0;

    &:last-child {
      margin-bottom: 0;
    }
  }

  tbody td {
    padding: space.get("medium") 0;
    border-bottom: none;
    text-align: left !important;

    &:before {
      content: attr(data-label);
      display: block;
      font-weight: 700;
      margin-bottom: space.get("xsmall");
    }

    &:first-child {
      padding-left: 0;
    }
  }
}