.card {
  $component-name: ".card";
  $card-horizontal-padding: -1;
  $card-vertical-padding-single-section: -1;
  $card-vertical-padding-multi-sections: -2;
  $card-border-top: $width-border-utility;
  $card-content-item-spacing: -5;
  //The height of two normal lines (name) + the height of a small line (title) + the space between name and title
  $card-profile-image-size: spacing($card-content-item-spacing, $add: line-height("single", $fontsize-relative: ("current": 0, "target": -1), $include-calc: false), $subtract: line-height("single", $times: -2, $include-calc: false));
  $card-clip-padding-vertical: -5;
  $card-clip-padding-horizontal: -3;
  $card-clip-icon-spacing: -3;
  $card-clip-icon-overflow: -3;
  $card-end-min-space: -1;
  $card-accessory-pop-out: -5;
  $card-accessory-pop-out-margin: -2;
  $card-accessory-button-padding: $button-padding-vertical-small;
  $card-column-max-width: $line-width-max;
  $card-column-wide-cards-max-width: calc( #{math.div($line-width-max, 1em)} * #{font-size(1)} + #{spacing($card-horizontal-padding)} * 2);
  $card-button-size: spacing($card-accessory-button-padding, $times: 2, $add: line-height("single", $include-calc: false), $subtract: $width-border * -2);
  $card-button-content-space: spacing($card-accessory-button-padding, $times: 2, $add: "#{line-height("single", $include-calc: false)} + #{spacing($card-accessory-pop-out-margin)} + #{$width-border * 2}", $subtract: spacing($card-accessory-pop-out));

  //overwrite default li style
  &::before {
    content: none;
  }
  padding-left: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  position: relative; //for absolute positioning of .card__button

  &__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative; //pseudo content trick for making entier card clickable, Pickering 2019
    border-top: $card-border-top solid color("border-theme");

    &:hover {
      #{$component-name}__section {
        background-color: color("background-secondary-hover");
      }
    }

    &:active {
      #{$component-name}__section {
        background-color: color("background-secondary");
      }
    }

    &:focus-within {
      outline: $outline-width solid color("utility-focus");
      outline-offset: -2 * $outline-offset; // Negative offset to avoid clipping from horizontal scroll panel 
    }

    $selector-string: "selector(:has(:focus-visible))";

    @supports (#{$selector-string}) {
      &:focus-within {
        outline: none;
      }
      &:has(:focus-visible) {
        outline: $outline-width solid color("utility-focus");
        outline-offset: -2 * $outline-offset; // Negative offset to avoid clipping from horizontal scroll panel 
      } 
    }
  }
  
  &__section {
    display: flex;
    flex-direction: column;
    padding: spacing($card-vertical-padding-multi-sections) spacing($card-horizontal-padding); //default padding for when card has multiple sections
    @include set-colors("background-secondary");

    &:only-child {
      padding: spacing($card-vertical-padding-single-section) spacing($card-horizontal-padding); //padding when card has only one section
    }

    &:last-child {
      flex-grow: 1;
    }

    & + & {
      margin-top: $width-border;
    }

    &__content {
      @include content-container;
      display: grid; //TODO: change to flex when safari has sufficient support for gap in flexbox
      gap: spacing($card-content-item-spacing);
      align-content: start;

      //card__section has display flex, so this makes the content div grow, effectively pushing the end div to the bottom of the card
      flex-grow: 1;
    }

    &__end {
      padding-top: spacing($card-end-min-space);
      @include content-container;
    }

    &--profile-image {
      flex-direction: row;
      align-items: start; //moves content to the top, when there is only one section in the card

      &:only-child {
        padding-top: spacing($card-vertical-padding-multi-sections);
        padding-bottom: spacing($card-vertical-padding-multi-sections);
      }

      #{$component-name}__section__content {
        align-content: center;
        min-height: $card-profile-image-size
      }

      .profile-image {
        flex-shrink: 0;
        flex-grow: 0;
        margin-left: spacing($card-accessory-pop-out-margin);
        margin-right: spacing($card-horizontal-padding, $times: 0, $subtract: spacing($card-accessory-pop-out));
        width: $card-profile-image-size;
        height: $card-profile-image-size;
        border-width: $width-border;
        border-color: color("background");
      }
    }

    &--button {
      padding-right: $card-button-content-space;
    }
  }


  &__title {
    @include set-font(0, "single", $weight: "bold", $transform: "none");
    margin: 0;

    &--large {
      @include set-font(1, "single", $weight: "bold");
    }

    & + #{$component-name}__subtitle {
      margin-top: $width-border;
    }

    a {
      // overwrite default link style
      #{$component-name} & {
        background-image: none;
        text-shadow: none;
        &:hover {
          color: color("foreground");
        }

        &:active {
          background-image: none;
          color: color("foreground-theme-hover");
        }

        &:focus {
          outline: none;
        }
      }

      //pseudo content trick for making entier card clickable, Pickering 2019
      &::after {
        content: "";
        position: absolute;
        top: $width-border-utility * -1; //also make the border clickable
        bottom: 0;
        right: 0;
        left: 0;
          z-index: $z-index-above-content; //make sure link is clickable, when it sits on top of stuff in card that uses z-index, e.g. the profile-image--stack
      }
    }
  }

  &__subtitle {
    @include set-font(0, "single");
  }

  &__details {
    @include set-font(-1, "single");
    color: color("foreground");

    &--primary {
      color: color("foreground");
    }
  }

  &__label {
    order: -1;
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    color: color("foreground-theme");
    margin-bottom: spacing(-5);
  }

  &__clip {
    @include set-colors("theme-secondary");
    @include set-font(-1, "single");
    display: inline-flex;
    align-items: center;
    padding-top: spacing($card-clip-padding-vertical);
    padding-right: spacing($card-clip-padding-horizontal);
    padding-bottom: spacing($card-clip-padding-vertical);
    padding-left: spacing($card-horizontal-padding, $subtract: spacing($card-clip-icon-overflow));
    border-left: math.div($width-border-utility, 2) solid color("theme-secondary");
    margin-left: spacing($card-horizontal-padding, $times: -1, $subtract: math.div($width-border-utility, 2));

    @include icon-style {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: font-size(0);
      background-color: color("theme-secondary");
      border-radius: 50%;
      border: $width-border solid color("background-secondary");
      $size: spacing($card-clip-icon-overflow, $times: 2, $add: line-height("single", $include-calc: false));
      margin-right: spacing($card-clip-icon-spacing);
      width: $size;
      height: $size;
      $overflow: spacing($card-clip-icon-overflow, $times: -1, $subtract: spacing($card-clip-padding-vertical));
      margin-top: $overflow;
      margin-bottom: $overflow;
    }
  }

  &__button {
    position: absolute;
    right: spacing($card-accessory-pop-out, $times: -1);
    top: spacing($card-vertical-padding-multi-sections, $subtract: $width-border); //if we ever use the button on a card with only one section we will need to make a modifer or other approach to postion the button at $card-vertical-padding-single-section form the top. Also, this must be fixed for when the .card__button is inside a cards columns with no padding, see further down this file
    flex-shrink: 0;
    flex-grow: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: color("foreground");
    z-index: $z-index-above-content + 1; //make sure the buttons sits above the card link

    @include icon-style {
      flex: 0 0 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    background-color: color("interactive");

    width: $card-button-size;
    height: $card-button-size;
    overflow: hidden;
    border-radius: 50%;
    border: $width-border solid color("background");

    &:hover {
      box-shadow: $shadow-style-front color("shadow");
      background-color: color("interactive-hover");
    }

    &:active {
      box-shadow: $shadow-style-back color("shadow");
    }

    &:focus-visible {
      outline: $outline-width solid color("utility-focus");
      outline-offset: $outline-offset;
    }

    &[aria-pressed="true"] {
      @include set-colors("theme");
      @include icon-style($style: "solid");

      &:hover {
        background-color: color("theme-hover");
      }
    }
  }

  .tags__item {
    @include set-colors("background");
  }

  .profile-image-stack {
    .profile-image {
      width: $card-profile-image-stack-size;
      height: $card-profile-image-stack-size;

      &--placeholder {
        @include set-font(-1, "single");
      }
    }
  }

  //CARD CONTAINERS
  &s-container {
    //overwrite default list style
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;

    display: grid;
    gap: spacing($card-container-spacing);

    & + & {
      margin-top: spacing(0);
    }

    .card {
      max-width: $card-container-card-width-max;
    }

    &--grid {
      grid-template-columns: repeat(auto-fit, minmax($card-container-card-width, 1fr));
      align-items: stretch;

      &--wide-cards {
        grid-template-columns: repeat(auto-fit, minmax($card-container-card-width-wide, 1fr));
      }
    }

    &--column {
      max-width: $card-column-max-width;

      .card {
        max-width: none;
      }

      &--wide-cards {
        max-width: $card-column-wide-cards-max-width;
      }

      .page__content__block--no-padding--not-on-medium-width & {
        margin-left: 0;
        margin-right: 0;

        .card {
          //for .card__section--button the right hand padding should be maintained in order to allow room for the absolute positioned button
          &__section:not(.card__section--button) {
            padding-left: spacing("side");
            padding-right: spacing("side");

            @include breakpoint("medium") {
              padding-left: spacing($card-horizontal-padding);
              padding-right: spacing($card-horizontal-padding);
            }
          }

          &__section--button {
            padding-left: spacing("side");
            padding-right: spacing("side");

            //NOTE If the card does not have a label, we need another
            .card__item--full-width-card-button-space {
              padding-right: $card-button-content-space;
            }

            @include breakpoint("medium") {
              padding-left: spacing($card-horizontal-padding);
              padding-right: $card-button-content-space;

              .card__item--full-width-card-button-space {
                padding-right: 0;
              }
            }
          }

          .card__button {
            top: spacing($card-accessory-pop-out, $times: -1);
            right: spacing("side", $subtract: $width-border);

            @include breakpoint("medium") {
              top: spacing($card-vertical-padding-multi-sections, $subtract: $width-border);
              right: spacing($card-accessory-pop-out, $times: -1);
            }
          }
        }
      }

      .page__content__block--center-align-items & {
        margin-left: auto;
        margin-right: auto;
      }
    }

    &--row {
      //by default row behaves like grid
      grid-template-columns: repeat(auto-fit, minmax($card-container-card-width, 1fr));
      align-items: stretch;

      &--wide-cards {
        grid-template-columns: repeat(auto-fit, minmax($card-container-card-width-wide, 1fr));
      }

      //...but if you put it inside a .horizontal-scroll, it becomes a scrolling row
      .horizontal-scroll & {
        display: flex;
        flex-wrap: nowrap;
        gap: 0; //TODO because of older safari versions not supporting gap for flexbox we are adding left hand margin to the cards instead

        .card {
          flex: 1 1 $card-container-card-width;
          min-width: spacing($page-padding-side, $times: -2, $add: 100vw, $subtract: spacing(0));
          margin-left: spacing($card-container-spacing - 1);

          &:first-child {
            margin-left: 0;
          }

          @include breakpoint("medium") {
            margin-left: spacing($card-container-spacing);
            min-width: $card-container-card-width;
          }
        }

        &--wide-cards {
          .card {
            @include breakpoint("medium") {
              min-width: $card-container-card-width-wide;
              flex: 1 1 $card-container-card-width-wide;
            }
          }
        }
      }

      .horizontal-scroll--no-scroll-wide & {
        @include breakpoint("wide") {
          //turn it back to a grid, if we don't want horizontal scrolling above the wide breakpoint
          display: grid;
          gap: spacing($card-container-spacing);
          width: 100%;

          .card {
            min-width: 0;
            margin-left: 0;
          }
        }
      }
    }
  }

  &s-column-peripherals {
    max-width: $card-column-max-width;

    &--wide {
      max-width: $card-column-wide-cards-max-width;
    }
  }
}