@use "design";
@use "m";

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  column-gap: design.$space-150;
  row-gap: design.$space-150;

  &.stretch {
    align-items: stretch;
  }

  .card {
    min-width: 19rem;
  }
}

.cardWrap {
  position: relative;
}

.card {
  composes: globalRoundedFieldsContainer from global;

  display: block;
  position: relative;

  @include m.screen {
    border-radius: design.$border-radius-large;

    min-height: 30px; // Because completely empty cards look weird

    &.outlineStyle {
      border: 1px solid design.$card-border-color;
    }

    .card.outlineStyle {
      border: 1px solid design.$card-border-color;
    }

    .wrappedCard .outlineStyle {
      border: 1px solid design.$card-border-color !important;
    }

    &.floatingStyle {
      margin: -1px;
      z-index: design.$z-floating-card;

      // I think this "floating" style is not going to be around long, so instead
      // of trying to fix the colors in a good way just hack it for now.
      background-color: design.$color-surface !important;
      color: design.$color-on-surface !important;
    }

    // Colors

    // Default, to avoid yet another class
    background-color: design.$color-surface;
    color: design.$color-on-surface;

    &.noneColor {
      background-color: transparent;

      &.outlineStyle {
        border-color: design.$color-on-page-background;
      }
    }
    &.successColor {
      color: design.$color-on-success-surface;
      background-color: design.$color-success-surface;
    }
    &.infoColor {
      color: design.$purple-05;
      background-color: design.$purple-90;
    }
    &.dangerColor {
      color: design.$color-on-error-surface;
      background-color: design.$color-error-surface;
    }
  }

  .card:not(.resetStyle):not(.infoColor):not(.successColor):not(.dangerColor) {
    background-color: design.$color-page-background;
    color: design.$color-on-page-background;
  }

  &.isSticky {
    position: sticky;
    top: design.$content-inset-top;
  }

  &.upEntrance {
    animation-name: up;
    animation-duration: 0.35s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }
}

@keyframes up {
  from {
    opacity: 1;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
  }
}

.wrappedCard {
  border: 1px solid design.$card-border-color;
  border-radius: design.$border-radius-large;

  padding-bottom: design.$card-h-padding;

  .card {
    margin-left: design.$card-h-padding;
    margin-right: design.$card-h-padding;
  }
}

// This is dumb but the DOM structure in <Hq.PerkDefinitionOverviews> makes stretching the cards
// pretty much impossible.  This looks better to me than just awkward empty space between cards.
.stretchedCardBackground {
  background: design.$color-surface;
  border: 1px solid transparent;
  border-radius: design.$border-radius-large;

  .card {
    border: 0;
  }
}

.cardLabel {
  margin-bottom: 8px;
  padding-left: design.$card-h-padding;
  padding-right: calc(design.$card-h-padding / 2);
}

.cardDescription {
  @include design.font-smaller;
  margin-top: 8px;
  padding-left: design.$card-h-padding;
  padding-right: calc(design.$card-h-padding / 2);
  color: design.$text-grey;
}

.debugButton {
  position: absolute;
  right: 5px;
  top: -6px;
}

// Too clever?
h6 + .debugButton {
  top: 22px;
}