:root {
  --f7-card-margin-horizontal: 16px;
  --f7-card-margin-vertical: 16px;
  --f7-card-content-padding-horizontal: 16px;
  --f7-card-content-padding-vertical: 16px;
  --f7-card-font-size: inherit;
  --f7-card-header-text-color: inherit;
  --f7-card-header-font-weight: 400;
  --f7-card-header-padding-horizontal: 16px;
  --f7-card-footer-font-weight: 400;
  --f7-card-footer-font-size: inherit;
  --f7-card-footer-padding-horizontal: 16px;
  --f7-card-expandable-font-size: 16px;
  --f7-card-expandable-tablet-width: 670px;
  --f7-card-expandable-tablet-height: 670px;
}
.ios-vars({
  --f7-card-border-radius: 8px;
  --f7-card-box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
  --f7-card-header-font-size: 17px;
  --f7-card-header-padding-vertical: 10px;
  --f7-card-header-min-height: 44px;
  --f7-card-footer-text-color: rgba(0,0,0,0.45);
  --f7-card-footer-padding-vertical: 10px;
  --f7-card-footer-min-height: 44px;
  --f7-card-expandable-margin-horizontal: 20px;
  --f7-card-expandable-margin-vertical: 30px;
  --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0,0,0,0.3);
  --f7-card-expandable-border-radius: 16px;
  --f7-card-expandable-tablet-border-radius: 16px;
  --f7-card-expandable-header-font-size: 27px;
  --f7-card-expandable-header-font-weight: bold;
  --f7-card-text-color: inherit;
  .light-vars({
    --f7-card-bg-color: #fff;
    --f7-card-expandable-bg-color: #fff;
    --f7-card-outline-border-color: rgba(0,0,0,0.12);
    --f7-card-header-border-color: rgba(0, 0, 0, 0.1);
    --f7-card-footer-border-color: rgba(0, 0, 0, 0.1);

  });
  .dark-vars({
    --f7-card-bg-color: #1c1c1d;
    --f7-card-expandable-bg-color: #1c1c1d;
    --f7-card-outline-border-color: rgba(255, 255, 255, 0.15);
    --f7-card-header-border-color: rgba(255, 255, 255, 0.15);
    --f7-card-footer-border-color: rgba(255, 255, 255, 0.15);
    --f7-card-footer-text-color: rgba(255,255,255,0.55);
  });
});
.md-vars({
  --f7-card-border-radius: 16px;
  --f7-card-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
                        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
                        0px 1px 3px 0px rgba(0, 0, 0, 0.12);;
  --f7-card-header-font-size: 22px;
  --f7-card-header-padding-vertical: 16px;
  --f7-card-header-min-height: 48px;
  --f7-card-footer-padding-vertical: 16px;
  --f7-card-footer-min-height: 48px;
  --f7-card-expandable-margin-horizontal: 12px;
  --f7-card-expandable-margin-vertical: 24px;
  --f7-card-expandable-box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
                                   0px 10px 14px 1px rgba(0, 0, 0, 0.14),
                                   0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --f7-card-expandable-border-radius: 16px;
  --f7-card-expandable-tablet-border-radius: 16px;
  --f7-card-expandable-header-font-size: 22px;
  --f7-card-expandable-header-font-weight: 500;
});

.md-color-vars({
  --f7-card-bg-color: var(--f7-md-surface-1);
  --f7-card-expandable-bg-color: var(--f7-md-surface-1);
  --f7-card-outline-border-color: var(--f7-md-outline);
  --f7-card-header-border-color: var(--f7-md-outline);
  --f7-card-footer-border-color: var(--f7-md-outline);
  --f7-card-text-color: var(--f7-md-on-surface);
  --f7-card-footer-text-color: var(--f7-md-on-surface-variant);
});
