pyth-network_pyth-crosschain/packages/component-library/src/EntityList/index.module.scss

@use "@pythnetwork/component-library/theme";

.entityList {
  background: theme.color("background", "primary");
  border-radius: theme.border-radius("xl");
  list-style-type: none;
  padding: 0;
  margin: 0;

  .entityItem {
    padding: theme.spacing(3) theme.spacing(4);
    border-bottom: 1px solid theme.color("background", "secondary");
    outline: theme.spacing(0.5) solid transparent;
    outline-offset: -#{theme.spacing(0.5)};
    transition:
      outline-color 100ms linear,
      background-color 100ms linear;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;

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

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

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

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

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

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

    .itemHeader,
    .itemDetailsItem {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
    }

    .itemDetails {
      display: grid;
      grid-template-columns: 1fr;
      gap: theme.spacing(2) theme.spacing(18);

      @include theme.breakpoint("sm") {
        grid-template-columns: repeat(2, 1fr);
      }

      .itemDetailsItem {
        height: theme.spacing(5);

        dt {
          @include theme.text("sm", "normal");

          color: theme.color("muted");
          margin-right: theme.spacing(4);
        }

        dd {
          margin: 0;
          text-align: right;
        }
      }
    }
  }
}