.HoverCard {
  $singleButtonHeight: 35px;
  $doubleButtonHeight: 70px; // Two 35px buttons stacked vertically
  $contentBottomPadding: 1em;
  $self: &;

  &--disabled {
    opacity: 0.5;
  }

  display: flex;
  flex-direction: column;
  align-content: stretch;
  background-color: var(--color--white);
  border-radius: var(--radius--extra-large);
  border: 1px solid var(--color--gray-200);
  transition-property: border-color, background-color;
  transition-duration: var(--timing--hover);
  overflow: hidden;

  &--enabled {
    &:hover,
    &:focus-visible,
    &:has(:focus-visible) {
      border-color: var(--color--gray-300);
      background-color: var(--color--white);

      #{$self}__ContentWrapper {
        // Slide the content up.
        // Account for the button height and bottom padding we want to preserve on the content
        transform: translateY(calc(-#{$singleButtonHeight} - #{$contentBottomPadding}));
      }

      #{$self}__ButtonWrapper {
        // Make the button wrapper visible and slide it up into view
        opacity: 1;
        transform: translateY(0);
      }

      #{$self}__Button {
        // Allow the button to be seen and interacted with.
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
      }
    }
  }

  // When two buttons are present (indicated by --with-gap modifier on root), slide up more to reveal both
  &--with-gap#{$self}--enabled {
    &:hover,
    &:focus-visible,
    &:has(:focus-visible) {
      #{$self}__ContentWrapper {
        transform: translateY(calc(-#{$doubleButtonHeight} - #{$contentBottomPadding}));
      }
    }
  }

  &__Billboard {
    aspect-ratio: 2 / 1;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1em;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    flex: none;
  }

  &__Content {
    background-color: var(--color--white);
    padding: 1.5em 1em $contentBottomPadding;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0.25em;
    margin-bottom: 0;
    // Apply relative positioning to allow absolute positioning to work well for the child wrapper.
    position: relative;
  }

  &__ChipWrapper {
    position: absolute;
    left: 1em;
    top: 0;
    transform: translateY(-50%);
  }

  &__Title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;

    &--with-subtitle {
      -webkit-line-clamp: 2;
    }
  }

  &__Subtitle {
    font-size: var(--font-size--s);
    color: var(--color--gray-500);
  }

  &__ContentWrapper {
    position: relative;
    transition: transform var(--timing--hover);
  }

  &__ButtonWrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 1em;
    opacity: 0;
    position: absolute;
    transform: translateY($singleButtonHeight);
    transition: opacity var(--timing--hover), transform var(--timing--hover);

    &--with-gap {
      gap: 5px;
      transform: translateY($doubleButtonHeight);
    }

    #{$self}__Button {
      width: 100%;
      // The properties below prevent the button from being seen and interacted with when the card is closed.
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity var(--timing--hover), visibility var(--timing--hover);
    }
  }
}