/**
 * Bootstrap card extended with EdGEL styles
 */

@use "../settings" as *;
@use "../tools" as *;

@import "bootstrap/scss/card";

// Allow .card-link to be used in conjunction with .stretched-link
.card-link {
  position: relative;
  z-index: #{$stretched-link-z-index + 1};
}

.card-title {
  @include font-size($h3-font-size);
  padding-bottom: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.card-subtitle {
  @include font-size($h4-font-size);
}

.card-contact {
  padding-top: space(3);

  .card-header {
    padding-bottom: 0;
  }

  .card-footer {
    border-top: solid 1px $gray-400;
  }
}

.card-low,
.card-medium,
.card-high,
.card-feature {
  .card-footer {
    padding-top: 0;
  }
}

.card-feature,
.card-low,
.card-high {
  .card-header {
    padding: space(4) $card-spacer-x 0;
  }
}

.card-low {
  @include edgel-topline();
  .card-title {
    --#{$prefix}link-hover-color-rgb: #{to-rgb($brand-as-link)};
  }
}

.card-medium {
  .card-header {
    padding: space(3) $card-spacer-x space(2);
    @include edgel-brand-bg();
  }
}

.card-high {
  .card-header,
  .card-footer,
  & {
    @include edgel-brand-bg();
  }
}

.card-feature {
  .card-header,
  .card-footer,
  & {
    @include edgel-dark-bg();
  }
}

.card-overview-low,
.card-overview-medium {
  --#{$prefix}link-hover-color-rgb: #{to-rgb($brand-as-link)};
  position: relative;
}

.card-overview-high {
  position: relative;
  .card-header {
    @include edgel-topline();
    @include edgel-brand-bg();
  }
}

.card-overview-medium {
  @include edgel-topline();
}

.card-overview-low {
  padding: 8px 0 $card-spacer-y;
}

.feature-row {
  --#{$prefix}gutter-y: #{$grid-gutter-height};
  padding: $grid-gutter-height $grid-gutter-width .1px;
  margin-bottom: $grid-gutter-height;
  background-color: $feature-bg;
  @include edgel-shadow();

  .card-feature {
    @include box-shadow(none);

    .card-header,
    .card-body,
    .card-footer {
      padding-right: 0;
      padding-left: 0;
    }

    > *:first-child {
      padding-top: 0;
    }
    > *:last-child {
      padding-bottom: 0;
    }
  }
}

.feature-row-title {
  @include font-size($h2-font-size);
  padding-bottom: 0;
  margin-top: space(1);
  margin-bottom: space(3);
  color: $feature-fg;
  border-bottom: none;
}

.card-featurebox {
  .card-header {
    padding-top: space(3);
    padding-bottom: space(2);
    background-color: $gray-100;
    border-color: $gray-400;
    @include edgel-shadow-light();
  }
  .card-title {
    font-size: $font-size-base;
    font-weight: $font-weight-bold;
    --#{$prefix}link-font-weight: #{$font-weight-bold};
  }
  .card-footer {
    background-color: $gray-100;
    border-color: $gray-400;
  }
}

.card-tabs,
.card-header-tabs {
  background-color: $page-content-bg;

  .nav-link:hover:not(.active) {
    background-color: $card-bg;
    border-bottom-color: $border-color;
  }
}

.card-header:has(.card-header-tabs) {
  border-bottom: solid 1px $border-color;
}