@import "variables";
@import "~bootstrap/scss/card";

a .pgn__card,
a.pgn__card {
  color: $gray-700;
  display: inline-block;
  text-decoration: none;
}

.pgn__card-grid {
  .row > div[class*="col-"] {
    margin-bottom: $card-grid-margin-bottom;
  }
}

.pgn__card-grid,
.pgn__card-deck {
  .row > div[class*="col-"] {
    display: flex;
    flex: 1 0 auto;

    &.pgn__card__disable-equal-column-heights {
      display: block;
    }
  }
}

.pgn__card-deck {
  position: relative;
  margin-bottom: $card-deck-margin-bottom;

  &.pgn__card-deck-has-horizontal-scroll {
    .pgn__card-deck-row {
      overflow-x: scroll;
    }
  }

  .pgn__card-deck-row {
    overflow: hidden;
    flex-wrap: nowrap;
    padding-top: $card-focus-border-offset;
    padding-bottom: $card-focus-border-offset;

    &:focus-visible {
      outline: $card-focus-border-width solid $card-border-focus-color;
      border-radius: $card-focus-border-radius;
    }
  }
}

.pgn__card-carousel {
  .pgn__card-carousel-title {
    margin-bottom: map-get($spacers, 2);
  }

  .pgn__card-carousel-subtitle {
    font-size: $font-size-sm;
    margin-bottom: map-get($spacers, 2);
  }

  .pgn__card-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: map-get($spacers, 1);
  }
}

%pgn__card-focused {
  outline: none;

  &::before {
    content: "";
    position: absolute;
    top: calc(-1 * #{$card-focus-border-offset});
    right: calc(-1 * #{$card-focus-border-offset});
    bottom: calc(-1 * #{$card-focus-border-offset});
    left: calc(-1 * #{$card-focus-border-offset});
    border: solid $card-focus-border-width $card-border-focus-color;
    border-radius: $card-focus-border-radius;
  }

  &.pgn__card-dark::before {
    border: solid $card-focus-border-width $card-border-focus-color-dark;
  }
}

.pgn__card {
  outline: none;

  @include pgn-box-shadow(1, "down");

  &.clickable {
    &:hover,
    &:focus,
    &.focus {
      cursor: pointer;

      @include pgn-box-shadow(2, "down");
    }

    &:focus,
    &.focus {
      @extend %pgn__card-focused;
    }
  }

  &.horizontal {
    flex-direction: row;
  }

  .pgn__card-header {
    padding: 0 $card-spacer-x;
    display: flex;
    justify-content: space-between;

    .pgn__card-header-content {
      display: flex;
      flex-direction: column;
      margin-top: map_get($spacers, 4\.5);
      overflow: auto;
      text-align: start;
      width: 100%;
    }

    %header-title {
      color: $black;
      font-weight: $font-weight-bold;
      text-align: start;
    }

    .pgn__card-header-title,
    .pgn__card-header-title-sm,
    .pgn__card-header-title-md {
      @extend %header-title;
    }

    .pgn__card-header-title-sm {
      font-size: $h4-font-size;
    }

    .pgn__card-header-title-md {
      font-size: $h3-font-size;
    }

    %header-subtitle {
      color: $gray-700;
      margin-top: map_get($spacers, 1);
    }

    .pgn__card-header-subtitle,
    .pgn__card-header-subtitle-sm,
    .pgn__card-header-subtitle-md {
      @extend %header-subtitle;
    }

    .pgn__card-header-subtitle-sm {
      font-size: $h5-font-size;
    }

    .pgn__card-header-subtitle-md {
      font-size: $h4-font-size;
    }

    .pgn__card-header-actions {
      margin-top: $spacer;
      margin-inline-start: $spacer;
      flex-shrink: 0;
    }

    .pgn__card-header-loader {
      width: 100%;

      .react-loading-skeleton {
        margin-top: map-get($spacers, 4);
      }
    }
  }

  .pgn__card-footer {
    width: 100%;
    padding: $card-spacer-x;
    display: flex;
    align-items: center;
    justify-content: center;

    &.vertical {
      justify-content: flex-end;
      padding-top: 0;

      & > * + * {
        margin-inline-start: $card-footer-actions-gap;
      }
    }

    .pgn__card-footer-loader {
      width: 100%;
      margin-inline-start: 0;
    }

    &.vertical-stacked {
      flex-direction: column-reverse;
      padding-top: $card-spacer-x - $card-footer-actions-gap;

      & > * {
        width: 100%;
        margin-top: $card-footer-actions-gap;
      }
    }

    &.horizontal {
      flex-wrap: wrap;

      & > :not(:last-child) {
        margin-inline-end: $card-footer-actions-gap;
      }
    }

    &.horizontal-stacked {
      flex-direction: column-reverse;
      padding-top: $card-spacer-x - $card-footer-actions-gap;

      & > * {
        margin-top: $card-footer-actions-gap;
      }
    }

    .pgn__card-footer-text {
      color: $gray-700;
      order: 1;
      font-size: $card-footer-text-font-size;

      &.vertical {
        margin-inline-end: auto;
        order: -1;
      }

      &.vertical-stacked {
        margin-right: auto;
      }

      &.horizontal {
        margin-top: $card-spacer-x;
        width: 100%;
        text-align: center;
      }

      &.horizontal-stacked {
        margin-top: $card-spacer-x;
        width: 100%;
        text-align: center;
        order: -1;
      }
    }
  }

  .pgn__card-divider {
    border-top: 1px solid $card-divider-bg;
    height: 0;
  }

  .pgn__card-section {
    padding: $card-spacer-x;
    flex-grow: 1;
    text-align: start;

    &.is-muted {
      background-color: $light-200;
    }

    .pgn__card-section-title {
      color: $black;
      font-weight: $font-weight-bold;
      font-size: $h5-font-size;
      margin-bottom: $card-spacer-y;
    }

    .pgn__card-section-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: $card-spacer-y;
    }

    dd {
      [dir="rtl"] & {
        margin-right: 0;
        margin-left: 40px;
      }
    }
  }

  .pgn__card-image-cap {
    object-fit: cover;
    max-height: inherit;
    width: 100%;
    border-top-left-radius: $card-image-border-radius;
    border-top-right-radius: $card-image-border-radius;
    display: none;

    &.show {
      display: block;
    }
  }

  .pgn__card-wrapper-image-cap {
    position: relative;

    &.horizontal {
      max-width: $card-image-horizontal-max-width;
      min-width: $card-image-horizontal-min-width;
      overflow: hidden;

      .pgn__card-image-cap {
        height: 100%;
        max-width: inherit;
        border-radius: $card-image-border-radius 0 0 $card-image-border-radius;
        width: auto;
        object-fit: cover;
      }

      .pgn__card-logo-cap {
        inset-inline-start: $card-logo-left-offset-horizontal;
        bottom: $card-logo-bottom-offset-horizontal;
      }

      .pgn__card-image-cap-loader {
        .react-loading-skeleton {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }

    &.vertical {
      max-height: $card-image-vertical-max-height;
    }

    .pgn__card-image-cap-loader {
      .react-loading-skeleton {
        margin-bottom: -$loading-skeleton-spacer;
        position: relative;
        top: -$loading-skeleton-spacer;
        height: 100%;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    .pgn__card-logo-cap {
      position: absolute;
      inset-inline-start: $card-logo-left-offset;
      bottom: #{-$card-logo-bottom-offset};
      width: $card-logo-width;
      height: $card-logo-height;
      border-radius: $card-logo-border-radius;
      box-shadow: $level-1-box-shadow;
      padding: map_get($spacers, 2);
      background-color: $white;
      display: none;

      &.show {
        display: block;
      }
    }
  }

  .pgn__card-status {
    box-shadow: none;
    margin-bottom: 0;
    font-size: $font-size-sm;
    line-height: 1.5rem;
    text-align: start;
    position: relative;
    padding: $card-spacer-y $card-spacer-x;
    border: 0 solid transparent;
    border-radius: 0 0 $card-border-radius $card-border-radius;

    .pgn__card-status__content {
      display: flex;
    }

    .pgn__card-status__message-content {
      flex-grow: 1;

      & > :last-child {
        margin-bottom: 0;
      }
    }

    .pgn__card-status__actions {
      margin-top: map-get($spacers, 3);
    }

    .pgn__card-status__heading {
      font-size: $h4-font-size;
      color: $black;
      display: flex;
      font-weight: $font-weight-bold;
      line-height: 1.5rem;
      margin-bottom: .5rem;
    }

    .pgn__card-status__content-icon {
      margin-inline-end: .8rem;
      width: 1.5rem;
      height: 1.5rem;
      flex-shrink: 0;
    }

    @each $color, $value in $theme-colors {
      &.pgn__card-status__#{$color} {
        color: inherit;
        background-color: theme-color($color, "background");
        border-color: theme-color($color, "border");

        .pgn__card-status__content-icon {
          color: theme-color($color, "default");
        }
      }
    }

    &.pgn__card-status__primary {
      color: $white;
      background-color: $primary-500;
      border-color: $primary-500;
      box-shadow: 0 0 0 1px $primary-500;

      .pgn__card-status__content-icon {
        color: $white;
      }
    }
  }
}

.pgn__card,
.pgn__card-body {
  width: 100%;
  border: 0;

  %dark-variant-content {
    color: $white;

    a {
      color: $white;
    }
  }

  &.pgn__card-dark {
    background-color: $card-bg-dark;

    @extend %dark-variant-content;

    .pgn__card-header {
      @extend %dark-variant-content;

      .pgn__card-header-title,
      .pgn__card-header-title-sm,
      .pgn__card-header-title-md,
      .pgn__card-header-subtitle,
      .pgn__card-header-subtitle-sm,
      .pgn__card-header-subtitle-md {
        @extend %dark-variant-content;
      }
    }

    .pgn__card-section {
      @extend %dark-variant-content;

      .pgn__card-section-title {
        @extend %dark-variant-content;
      }
    }

    .pgn__card-footer,
    .pgn__card-footer-text {
      @extend %dark-variant-content;
    }
  }

  &.pgn__card-muted {
    background-color: $card-bg-muted;
  }
}

@media (max-width: map-get($grid-breakpoints, "sm")) {
  .pgn__card-footer {
    &.horizontal > :not(:last-child) {
      margin-inline-end: 0;
    }

    .btn {
      width: 100%;
      margin: .625rem 0 0;
      margin-inline-end: 0;
    }
  }

  .pgn__action-row {
    .btn:not(:last-child) {
      margin-bottom: .3125rem;
    }

    & > * + * {
      margin-inline-start: 0;
    }
  }

  .pgn__action-row-stacked,
  .pgn__card-section {
    .btn {
      width: 100%;
    }
  }
}