@use 'sass:map';
@use '../variables' as variables;
@use '../functions' as functions;
@use '../mixins' as mixins;

:where(.card) {
  --card-background-color: #{variables.$card-background-color};
  --card-border-width: #{variables.$card-border-width};
  --card-border-color: #{variables.$card-border-color};
  --card-border-color-hover: #{variables.$card-border-color-hover};

  --card-border-radius: #{variables.$card-border-radius};
  --card-box-shadow: #{variables.$card-box-shadow};
  --card-font-size: #{variables.$card-font-size};
  --card-line-height: #{variables.$card-line-height};
  --card-padding-x: #{variables.$card-padding-x};
  --card-padding-y: #{variables.$card-padding-y};
  --card-media-horizontal-min-width: #{variables.$card-media-horizontal-min-width};

  background-color: var(--card-background-color);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);
  font-size: var(--card-font-size);
  line-height: var(--card-line-height);
}

:where(.card-sm) {
  --card-sm-border-radius: #{variables.$card-sm-border-radius};
  --card-sm-box-shadow: #{variables.$card-sm-box-shadow};
  --card-padding-x: #{variables.$card-sm-padding-x};
  --card-padding-y: #{variables.$card-sm-padding-y};
  --card-font-size: #{variables.$card-sm-font-size};

  border-radius: var(--card-sm-border-radius);
  box-shadow: var(--card-sm-box-shadow);
}

:where(.card-lg) {
  --card-lg-border-radius: #{variables.$card-lg-border-radius};
  --card-lg-box-shadow: #{variables.$card-lg-box-shadow};
  --card-padding-x: #{variables.$card-lg-padding-x};
  --card-padding-y: #{variables.$card-lg-padding-y};
  --card-font-size: #{variables.$card-lg-font-size};

  border-radius: var(--card-lg-border-radius);
  box-shadow: var(--card-lg-box-shadow);
}

.card-body,
.card-footer {
  font-size: var(--card-font-size);
  padding-left: var(--card-padding-x);
  padding-right: var(--card-padding-x);
}

.card-body {
  padding-bottom: var(--card-padding-y);
  padding-top: var(--card-padding-y);
}

:where(.card-borderless) {
  border: none;
  box-shadow: none;

  > .card-media {
    border: var(--card-border-width) solid var(--card-border-color);
    border-radius: inherit;
    @include mixins.hover {
      border-color: var(--card-border-color-hover);
    }
  }

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

.card-media {
  overflow: hidden;

  &:first-child,
  video {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }

  &:last-child,
  video {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }

  &:not(:first-child):not(:last-child) {
    display: block;
    margin-bottom: var(--card-padding-y);
    width: 100%;
  }
}

.card-footer {
  --deprecated: 'WARNING: This class will be removed with the next major version';
  padding-bottom: var(--card-padding-y);
}

// Responsive Card Layouts
//
// Generate series of `.card-*-horizontal/vertical` classes for configuring the screen

@each $breakpoint in map.keys(variables.$grid-breakpoints) {
  $infix: functions.breakpoint-infix($breakpoint, variables.$grid-breakpoints);

  @include mixins.media-breakpoint-up($breakpoint) {
    .card#{$infix}-horizontal {
      align-items: flex-start;
      display: flex;
      flex-direction: row;

      &.card {
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;

        .card-media {
          --card-sm-border-radius: #{variables.$card-sm-border-radius};

          border-radius: var(--card-sm-border-radius);
          flex: 1;
          min-width: var(--card-media-horizontal-min-width);
        }

        .card-body {
          align-self: start;
          flex: 2;
          padding: 0;
          padding-left: var(--card-padding-x);
        }
      }
    }

    .card#{$infix}-vertical {
      display: flex;
      flex-direction: column;

      &.card {
        background-color: var(--card-background-color);
        border: var(--card-border-width) solid var(--card-border-color);
        border-radius: var(--card-border-radius);
        box-shadow: var(--card-box-shadow);

        .card-media {
          border-radius: inherit;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          width: 100%;
        }

        .card-body {
          padding-top: var(--card-padding-y);
          padding-bottom: var(--card-padding-y);
          padding-left: var(--card-padding-x);
          padding-right: var(--card-padding-x);
        }
      }

      &.card-sm {
        border-radius: var(--card-sm-border-radius);
        box-shadow: var(--card-sm-box-shadow);
      }

      &.card-lg {
        border-radius: var(--card-lg-border-radius);
        box-shadow: var(--card-lg-box-shadow);
      }
    }
  }
}