@use '../style/base' as *;

@include bem(card) {
  @include b() {
    @include universal;
    background: var(--sar-card-bg);
    border-radius: var(--sar-card-border-radius);

    @include m(hover) {
      cursor: pointer;

      &:active {
        background: var(--sar-card-active-bg);
      }
    }
  }

  @include e(header) {
    @include universal;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--sar-card-header-padding-y) var(--sar-card-header-padding-x);

    &::after {
      @include border-bottom(
        var(--sar-card-header-border-color, var(--sar-card-border-color)),
        var(--sar-card-header-border-style, var(--sar-card-border-style)),
        var(--sar-card-header-border-width, var(--sar-card-border-width))
      );
      left: var(--sar-card-border-left);
      right: var(--sar-card-border-right);
    }
  }

  @include e(title) {
    font-size: var(--sar-card-title-font-size);
    line-height: var(--sar-card-title-line-height);
    flex: 1;
    min-width: 0;
  }

  @include e(extra) {
    @include universal;
  }

  @include e(body) {
    @include universal;
    padding: var(--sar-card-body-padding-y) var(--sar-card-body-padding-x);
  }

  @include e(footer) {
    @include universal;
    padding: var(--sar-card-footer-padding-y) var(--sar-card-footer-padding-x);
    &::before {
      @include border-top(
        var(--sar-card-footer-border-color, var(--sar-card-border-color)),
        var(--sar-card-footer-border-style, var(--sar-card-border-style)),
        var(--sar-card-footer-border-width, var(--sar-card-border-width))
      );
      left: var(--sar-card-border-left);
      right: var(--sar-card-border-right);
    }
  }

  @include m(head-borderless, collapsed) {
    @include e(header) {
      &::after {
        display: none;
      }
    }
  }

  @include m(foot-borderless) {
    @include e(footer) {
      &::before {
        display: none;
      }
    }
  }
}