@import '../base/variables';
@import '../mixins/hover';

@each $type, $value in $main-component-cta {
  .card-#{$type}-container {
    border: 1px solid map-get($main-component-type, $type);
    a {
      color: $value;
      @include hover-focus{
        color: map-get($main-component-cta-hover, $type) !important;
      }
    }

    &.card-clickable {
      transition: $card-hover-animation;
      @include hover-focus-visible {
        transform: translateY($card-hover-animation-size);
        box-shadow: $card-shadow;
      }
      &:hover{
        transition-delay: 100ms;
      }
      &:focus-visible {
        outline: none;
        // box-shadow breakdown: 1) the card's hover | 2) visually make the border 3px | 3) visually add 2px external border to contrast with dark bg
        box-shadow: $card-shadow,
        0 0 0 2px $value,
        0 0 0 4px map-get($main-component-backgrounds, $type);

        // Add extra inside border in case there is an image that touches the edge
        &:before {
          content: " ";
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 2px solid map-get($main-component-backgrounds, $type);
        }  

        &.card-container {
          border-color: $value;
        }
      }      
    }

    /* if a card has a "stretched-link" add the hover effects */
    &:has(.stretched-link) {
      cursor: pointer;       
      transition: $card-hover-animation;
      @include hover-focus-visible {
        transform: translateY($card-hover-animation-size);
        box-shadow: $card-shadow;
      }
      &:hover{
        transition-delay: 100ms;
      }
    }    
  }
}

.card-container {
  border-radius: 2px;
  position: relative;
  border-radius: 2px;  
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  width:100%;

  // Status modifiers
  &--status{
    border: 1px solid $border-color;
    border-left: 0;
    padding-left: 8px;
    background-color: $white;

    &:before{
      content: '';
      position: absolute;
      width: 8px;
      height: calc(100% + 2px);
      top: -1px;
      left: 0;
      border-bottom-left-radius: 2px;
      border-top-left-radius: 2px;
      background-color: $border-color;
      transition: $card-hover-animation;
    }

  // Status color modifiers
    @each $type, $value in $status-colors {
      &-#{$type} {

        &.card-clickable {
          transition: $card-hover-animation;
          @include hover-focus-visible {
            transform: translateY($card-hover-animation-size);
            box-shadow: $card-shadow;
          }
          &:hover{
            transition-delay: 100ms;
          }
          &:focus-visible {
            outline: none;
            // box-shadow breakdown: 1) the card's hover | 2) visually make the border 3px | 3) visually add 2px external border to contrast with dark bg
            @if $type == 'gray' {
              box-shadow: $card-shadow,
              0 0 0 2px $gray-50,
              0 0 0 4px $white;
            } 
            @else if $type == 'warning' {
              box-shadow: $card-shadow,
              0 0 0 2px $warning-link,
              0 0 0 4px $white;
            } @else {
              box-shadow: $card-shadow,
              0 0 0 2px $value,
              0 0 0 4px $white;
            }
            &:before{
              width: 10px;
              @if $type == 'gray' {
                background-color: $gray-50;
              } 
              @else if $type == 'warning' {
                background-color: $warning-link;
              }
            }
    
            &.card-container {
              @if $type == 'gray' {
                border-color: $gray-50;
              } 
              @else if $type == 'warning' {
                border-color: $warning-link;
              } @else {
                border-color: $value;
              }
            }
          }  
        }

        &:before{
          background-color: $value;
        }
      }
    }
  }  
}