@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;

  @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 {
    padding: theme.spacing(3) theme.spacing(4);
    position: relative;

    .title {
      margin: 0;
      font-size: theme.font-size("base");
      font-weight: theme.font-weight("medium");
      color: theme.color("heading");
      display: inline-flex;
      flex-flow: row nowrap;
      gap: theme.spacing(3);
      align-items: center;

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

    .toolbar {
      position: absolute;
      right: theme.spacing(3);
      top: 0;
      bottom: theme.spacing(0);
      display: flex;
      flex-flow: row nowrap;
      gap: theme.spacing(2);
      align-items: center;
    }
  }

  .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");
  }
}