.np-Card {
  // Root variables
  --Card-image-scale: 1;
  --Card-image-translate: 0;
  --Card-indicator-text-background-color: var(--color-background-neutral);
  --Card-indicator-icon-background-color: var(--color-interactive-accent);
  --Card-indicator-icon-color: var(--color-interactive-control);
  --Card-check-background-color: var(--color-interactive-primary);
  --Card-check-color: var(--color-interactive-control);

  &--promoCard {
    --Card-max-width: 358px;

    &.is-disabled {
      opacity: .45;
      filter: grayscale(1);
    }
  }

  &-image {
    transform: scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));
    transition: transform .5s ease-in-out;
    margin: 0 auto;
    width: 100%;
    height: auto;
    width: calc(100% + var(--size-48)); // Ensures we have 100% width to parent
    left: calc(var(--size-24) * -1);
    position: relative;

    [dir="rtl"] & {
      left: auto;
      right: calc(var(--size-24) * -1);
    }
  }

  &-description {
    color: var(--color-content-secondary);
  }
  
  &-indicator {
    position: absolute;
    right: var(--size-8);
    bottom: var(--size-8);
    display: flex;
    gap: var(--size-4);

    [dir="rtl"] & {
      right: auto;
      left: var(--size-8);
    }
    
    &Text {
      display: inline-block;
      vertical-align: middle;
      text-align: left;
      background: var(--Card-indicator-text-background-color);
      padding: var(--size-16);
      border-radius: 100px;
    }
    
    &Icon .tw-icon {
      color: var(--Card-indicator-icon-color);

      // Flips icon for right to left content
      [dir="rtl"] & {
        transform: scaleX(-1);
      }
    }
  }
  
  &--checked,
  &--link {
    color: currentColor;
    cursor: pointer;
    box-shadow: none;
    transform: scale(1);
    transition: box-shadow .2s ease-in-out, transform .5s ease-in-out;

    // Defines a box shadow for the Card component that is only applied 
    // when it is a child of an element with the class np-theme-personal 
    // and does not have the class `'np-theme-personal--(dark|bright-green|forest-green)'`.
    .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--bright-green, .np-theme-personal--forest-green) & {
      --Card-box-shadow: 0px 20px var(--size-40) 0px var(--color-background-neutral);
      --Card-check-color: var(--color-interactive-accent);
    }

    &.is-disabled {
      cursor: not-allowed;
    }
    
    // Removes all animations for users who prefer reduced motion
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    
    &:hover:not(.is-disabled, :disabled, .is-checked, :focus-within) {
      --Card-image-scale: 1.1;
      box-shadow: var(--Card-box-shadow);
    }
  
    &:active:not(.is-disabled, :disabled, .is-checked) { 
      --Card-background-color: var(--color-background-neutral-active);
      --Card-image-scale: 1.1;
      --Card-image-translate: var(--size-8);
      transform: scale(98%);
      box-shadow: var(--Card-box-shadow);

      // Required as --color-background-elevated isn't present within the 
      // bright-green theme
      .np-theme-personal--bright-green & {
        --Card-background-color: var(--color-background-neutral);
      }
    }

    &:has(:focus-visible):not(.np-Card--checked),
    &:focus-visible:not(.is-disabled, :disabled) {
      --Card-image-scale: 1.1;
      outline: var(--ring-outline-color) solid var(--size-4);
      outline-offset: var(--size-4);
      box-shadow: var(--Card-box-shadow);
    }

    &:has(.np-Card-closeButton:focus-visible) {
      outline: none;
    }
  }

  &--link {
    .np-Card-titleLink {
      color: var(--color-content-primary);
      text-decoration: none;

      &:focus-visible {
        outline: none;
      }

      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: 10;
      }
    }
  }

  &--checked {
    &.is-checked {
      box-shadow: 0 0 0 var(--size-4) var(--color-interactive-primary);
      
      .np-Card-check {
        color: var(--Card-check-color);
        background: var(--Card-check-background-color);
        border-radius: var(--radius-full);
        display: flex;
        height: var(--size-40);
        position: absolute;
        right: var(--size-8);
        top: var(--size-8);
        width: var(--size-40);
        justify-content: center;
        align-items: center;

        [dir="rtl"] & {
          right: auto;
          left: var(--size-8);
        }
      }
      
      &:focus-visible:not(.is-disabled, :disabled) {
        box-shadow: none;
      }
    }
  }
}

.np-CardGroup {
  display: flex;
  flex-direction: column;
  gap: var(--size-24);
  width: 100%;

  @media (--screen-md) {
    flex-direction: row;
  }

  .np-Card.np-Card--promoCard {
    max-width: 100%;
  }
}