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

@use "../theme";

.card {
  display: flex;
  flex-direction: column;
  gap: theme.spacing(1);
  border-radius: theme.border-radius("2xl");
  text-decoration: none;
  color: unset;
  outline-offset: 0;
  outline: theme.spacing(1) solid transparent;
  transition-property: outline-color, border-color, box-shadow, background;
  transition-duration: 100ms;
  transition-timing-function: linear;
  border: 1px solid transparent;
  position: relative;
  padding: theme.spacing(1);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;

  @at-root button#{&} {
    cursor: pointer;
    width: 100%;
  }

  .cardHoverBackground {
    border-radius: theme.border-radius("2xl");
    position: absolute;
    inset: -1px;
    opacity: 0;
    transition: opacity 100ms linear;
    background: theme.color("button", "outline", "background", "hover");
    z-index: -1;
  }

  .header {
    display: flex;

    // padding: theme.spacing(3) theme.spacing(4);
    position: relative;
    flex-flow: column nowrap;

    .title {
      color: theme.color("heading");
      display: inline-flex;
      flex-flow: row nowrap;
      gap: theme.spacing(3);
      align-items: center;
      padding: theme.spacing(3);

      @include theme.text("lg", "medium");

      .icon {
        font-size: theme.spacing(6);
        height: theme.spacing(6);
        color: theme.color("button", "primary", "background", "normal");
      }
    }

    .toolbar {
      display: flex;
      flex-flow: row nowrap;
      gap: theme.spacing(2);
      align-items: center;
      justify-content: center;
      padding: theme.spacing(1.5);

      @include theme.breakpoint("lg") {
        position: absolute;
        right: theme.spacing(3);
        top: 0;
        bottom: theme.spacing(0);
        gap: theme.spacing(4);
        justify-content: unset;
        padding: 0;
      }

      &[data-always-on-top] {
        position: absolute;
        right: theme.spacing(3);
        top: 0;
        bottom: theme.spacing(0);
        gap: theme.spacing(4);
      }
    }
  }

  .footer {
    padding: theme.spacing(2);
  }

  &[data-variant="primary"] {
    background: theme.color("background", "card-highlight");

    &[data-hovered] {
      @include theme.elevation("primary", 2);
    }
  }

  &[data-variant="secondary"] {
    background: theme.color("background", "secondary");

    &[data-hovered] {
      @include theme.elevation("default", 2);
    }
  }

  &[data-variant="tertiary"] {
    background: theme.color("background", "primary");

    &[data-hovered] {
      @include theme.elevation("default", 2);
    }
  }

  &[data-hovered] .cardHoverBackground {
    opacity: 1;
  }

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