@use "sass:color";
@use "./../variables" as *;
@use "./../mixins/group" as *;

.card {
  --card-background: var(--white);
  --card-hover-background: color-mix(in oklab, var(--html-color), #fff 95%);
  --card-border-width: 1px;
  --card-border-style: solid;
  --card-border-color: var(--border-color-main);
  --card-border-radius: var(--border-radius-medium);
  --card-header-footer-padding-y: #{$card-header-footer-padding-y};
  --card-header-footer-padding-x: #{$card-header-footer-padding-x};
  --card-body-padding-y: #{$card-body-padding-y};
  --card-body-padding-x: #{$card-body-padding-x};

  background-color: var(--card-background);
  border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
  border-radius: var(--card-border-radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  flex: 1 1 auto;
  position: relative;

  $card-margin-fallback: if(
    sass($enable-margins): var(--spacer) ; else: 0
  );

  margin-bottom: var(--card-margin-bottom, #{$card-margin-fallback});

  & > * {
    &:first-child {
      border-top-left-radius: calc(var(--card-border-radius) - 1px);
      border-top-right-radius: calc(var(--card-border-radius) - 1px);
    }

    &:last-child {
      border-bottom-left-radius: calc(var(--card-border-radius) - 1px);
      border-bottom-right-radius: calc(var(--card-border-radius) - 1px);
    }
  }

  & .card__header,
  & .card__footer {
    display: flex;
    flex-flow: row wrap;
    align-items: normal;
    padding: var(--card-header-footer-padding-y) var(--card-header-footer-padding-x);

    & > * {
      margin-bottom: 0;
    }
  }

  & .card__header {
    border-bottom: var(--card-border-width) var(--card-border-style) var(--card-border-color);
  }

  & .card__footer {
    margin-top: auto;
    border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
  }

  & .card__body {
    flex: 1 1 auto;
    width: 100%;
    padding: var(--card-body-padding-y) var(--card-body-padding-x);

    & + .card__body {
      border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
    }
  }

  & .card__image {
    flex: 1 0 100%;
    overflow: hidden;

    & img {
      width: 100%;
      height: auto;
    }
  }
}

details.card {
  & .card__header {
    border-bottom-color: transparent;

    &:hover {
      background-color: var(--card-hover-background);
    }
  }

  &[open] {
    & .card__header {
      border-bottom-color: var(--card-border-color);
    }
  }
}

.cards {
  @include make-group-column;

  &.cards--grouped {
    @include make-grouped-column;
  }
}