@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) {
  border-radius: getCssVar('border-radius-lg');
  background-color: getCssVar('color-white');
  overflow: hidden;
  transition: getCssVar('transition-duration');

  @include when(bordered) {
    border: getCssVar('border');
  }

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

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

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

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

  @include e(header) {
    padding: 24px;
    border-bottom: getCssVar('border');
  }

  @include e(footer) {
    padding: 24px;
    border-top: getCssVar('border');
  }

  @include e(body) {
    padding: 24px;
  }
}