@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$card: () !default;
$card: map.merge(
  (
    bg-color: value('bg-color-base'),
    b-color: value('border-color-light-1'),
    border: value('border-shape') value('card-b-color'),
    radius: value('radius-base'),
    s-color: value('shadow-color-base'),
    shadow: value('shadow-shape') value('card-s-color'),
    d-color: value('border-color-light-2'),
    divider: value('border-shape') value('card-d-color'),
    title-font-size: value('font-size-primary'),
    body-v-padding: 14px,
    body-h-padding: 16px
  ),
  $card
);

.#{$namespace}-card {
  &-vars {
    @include define-preset-values('card', $card);
  }

  @include basis {
    display: flex;
    flex-direction: column;
    background-color: value('card-bg-color');
    border: value('card-border');
    border-radius: value('card-radius');
    box-shadow: 0 0 0 transparent;
    transition: value('transition-shadow');
  }

  @include inherit-color;

  &--shadow-always {
    box-shadow: value('card-shadow');
  }

  &--shadow-hover {
    &:hover {
      box-shadow: value('card-shadow');
    }
  }

  &__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    padding: 14px 16px;
    border-bottom: value('card-divider');
  }

  &__title {
    font-size: value('card-title-font-size');
  }

  &__content {
    flex: 1 0 auto;
    min-height: 0;
    padding: value('card-body-v-padding') value('card-body-h-padding');
  }
}