@use "../theme";

.tableContainer {
  background-color: theme.color("background", "primary");
  position: relative;

  .loaderWrapper {
    position: absolute;
    top: theme.spacing(10);
    left: 0;
    right: 0;
    height: theme.spacing(0.5);
    overflow: hidden;

    .loader {
      width: 100%;
      height: 100%;
      background-color: theme.color("focus");
      transform-origin: left;
      animation: progress 1s infinite linear;

      @keyframes progress {
        0% {
          transform: translateX(0) scaleX(0);
        }

        40% {
          transform: translateX(0) scaleX(0.4);
        }

        100% {
          transform: translateX(100%) scaleX(0.5);
        }
      }
    }
  }

  .table {
    border-spacing: 0;

    .cell {
      padding: theme.spacing(3) theme.spacing(4);
      white-space: nowrap;
      border: 0;
      outline: theme.spacing(0.5) solid transparent;
      width: calc((theme.spacing(1) * var(--width)) + theme.spacing(8));
      outline-offset: -#{theme.spacing(0.5)};
      background-color: theme.color("background", "primary");
      transition: outline-color 100ms linear;

      &[data-alignment="left"] {
        text-align: left;
      }

      &[data-alignment="center"] {
        text-align: center;
      }

      &[data-alignment="right"] {
        text-align: right;
      }

      &[data-fill] {
        width: 100%;
      }

      &[data-sticky] {
        position: sticky;
        left: 0;
        z-index: 1;
        border-right: 1px solid theme.color("border");
      }

      &[data-focus-visible] {
        outline-color: theme.color("focus");
      }
    }

    .tableHeader {
      font-size: theme.font-size("xs");
      line-height: theme.spacing(4);
      color: theme.color("muted");

      .cell {
        position: relative;
        border-bottom: 1px solid theme.color("border");
        font-weight: theme.font-weight("medium");

        .name {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          gap: theme.spacing(2);
          height: theme.spacing(4);
        }

        .divider {
          width: 1px;
          height: theme.spacing(4);
          background: theme.color("background", "secondary");
          position: absolute;
          right: 0;
          top: theme.spacing(3);
        }

        &[data-sticky-header] {
          position: sticky;
          top: var(--sticky-header-top);
          z-index: 1;
        }

        &[data-sticky] {
          z-index: 2;
        }

        &:last-child .divider {
          display: none;
        }

        &[data-alignment="right"],
        &[data-alignment="center"] {
          &[data-allows-sorting] {
            padding-right: theme.spacing(10);
          }
        }

        .sortButton {
          position: absolute;
          right: theme.spacing(2);
          top: theme.spacing(2);

          .ascending,
          .descending {
            opacity: 0.25;
            transition: opacity 100ms linear;
          }
        }

        &[data-sort-direction="ascending"] .sortButton .ascending {
          opacity: 1;
        }

        &[data-sort-direction="descending"] .sortButton .descending {
          opacity: 1;
        }

        &[data-alignment="center"] .name {
          justify-content: center;
        }

        &[data-alignment="right"] .name {
          justify-content: flex-end;
        }
      }
    }

    .tableBody {
      @include theme.text("base", "medium");

      color: theme.color("paragraph");
      font-weight: theme.font-weight("medium");

      .row {
        outline: theme.spacing(0.5) solid transparent;
        outline-offset: -#{theme.spacing(0.5)};
        transition: outline-color 100ms linear;

        &[data-focus-visible] {
          outline: theme.spacing(0.5) solid theme.color("focus");
        }

        &[data-href],
        &[data-has-action] {
          cursor: pointer;
        }

        .cell {
          transition: background-color 100ms linear;
          border-bottom: 1px solid theme.color("background", "secondary");
        }

        &[data-hovered] .cell {
          background-color: theme.color(
            "button",
            "outline",
            "background",
            "hover"
          );
        }

        &[data-pressed] .cell {
          background-color: theme.color(
            "button",
            "outline",
            "background",
            "active"
          );
        }
      }
    }
  }

  &[data-fill] {
    &,
    .table {
      width: 100%;
    }
  }

  &[data-rounded] {
    border-radius: theme.border-radius("xl");

    .table {
      .tableHeader .cell {
        &:first-child {
          border-top-left-radius: theme.border-radius("xl");
        }

        &:last-child {
          border-top-right-radius: theme.border-radius("xl");
        }
      }

      .tableBody .row:last-child {
        border-bottom-left-radius: theme.border-radius("xl");
        border-bottom-right-radius: theme.border-radius("xl");

        .cell {
          &:first-child {
            border-bottom-left-radius: theme.border-radius("xl");
          }

          &:last-child {
            border-bottom-right-radius: theme.border-radius("xl");
          }
        }
      }
    }
  }
}