@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(card) {
  @include set-component-css-var('card', $card);
}

@include b(card) {
  $padding: getCssVar('card', 'padding');

  border-radius: getCssVar('card', 'border-radius');
  border: 1px solid getCssVar('card', 'border-color');
  background-color: getCssVar('card', 'bg-color');
  overflow: hidden;
  color: getCssVar('text-color', 'primary');
  transition: getCssVar('transition-duration');
  flex-direction: column;
  gap: 8px;

  @include when(always-shadow) {
    box-shadow: getCssVar('box-shadow', 'light');
  }

  @include when(hover-shadow) {
    &:hover,
    &:focus {
      box-shadow: getCssVar('box-shadow', 'light');
    }
  }

  @include e(header) {
    padding: $padding $padding 0 $padding;
    // border-bottom: 1px solid getCssVar('card', 'border-color');
    box-sizing: border-box;
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
  }

  @include e(body) {
    font-size: 14px;
    line-height: 24px;
    color: getCssVar('color-neutral-light-8');
    padding: 0 $padding $padding $padding;
  }

  @include e(footer) {
    padding: 0 $padding $padding $padding;
    // border-top: 1px solid getCssVar('card', 'border-color');
    box-sizing: border-box;
    color: getCssVar('color-neutral-light-8');
    font-size: 12px;
    line-height: 16px;
  }
}