@use '../../_styles/mixin.scss' as *;

@include respond('laptop') {
  .o-card {
    &:not(.o-card-no-responsive) {
      --card-radius: var(--o-radius_control-m);
      --card-cover-radius: var(--o-radius_control-s);

      --card-header-text-size: var(--o-font_size-text2);
      --card-header-text-height: var(--o-line_height-text2);

      --card-main-padding-v: 16px;
      --card-main-padding-h: 24px;

      --card-icon-gap: 12px;

      --card-title-icon-gap: var(--o-gap-2);

      --card-content-gap: 8px;
      --card-content-text-size: var(--o-font_size-tip1);
      --card-content-text-height: var(--o-line_height-tip1);

      --card-footer-gap: 16px;
      --card-footer-text-size: var(--o-font_size-tip2);
      --card-footer-text-height: var(--o-line_height-tip2);

      &.o-card-cover {
        --card-main-padding-h: 16px;
      }
    }
  }
}
@include respond('pad_h') {
  .o-card {
    &:not(.o-card-no-responsive) {
      --card-radius: var(--o-radius_control-s);

      --card-cover-radius: var(--o-radius_control-xs);

      --card-header-text-size: var(--o-font_size-text1);
      --card-header-text-height: var(--o-line_height-text1);

      --card-main-padding-v: 12px;
      --card-main-padding-h: 16px;

      --card-icon-gap: 8px;
      --card-icon-size: var(--o-icon_size-xl);

      --card-title-icon-gap: var(--o-gap-2);
      --card-title-icon-size: var(--o-icon_size-m);

      --card-content-gap: 8px;
      --card-content-text-size: var(--o-font_size-tip1);
      --card-content-text-height: var(--o-line_height-tip1);

      --card-footer-gap: 12px;
      --card-footer-text-size: var(--o-font_size-tip2);
      --card-footer-text-height: var(--o-line_height-tip2);

      .o-card-cover-v {
        --card-cover-padding: 4px 4px 0;
      }

      .o-card-cover-h {
        --card-cover-padding: 4px 0 4px 4px;
      }

      .o-card-cover-hr {
        --card-cover-padding: 4px 4px 4px 0;
      }

      &.o-card-cover {
        --card-main-padding-h: 12px;
      }
    }
  }
}
@include respond('<=pad_v') {
  .o-card {
    &:not(.o-card-no-responsive) {
      --card-radius: var(--o-radius_control-s);

      --card-cover-radius: var(--o-radius_control-xs);

      --card-main-padding-v: 8px;
      --card-main-padding-h: 12px;

      --card-header-text-size: var(--o-font_size-tip1);
      --card-header-text-height: var(--o-line_height-tip1);

      --card-icon-gap: 8px;
      --card-icon-size: var(--o-icon_size_control-l);

      --card-title-icon-gap: var(--o-gap-2);
      --card-title-icon-size: var(--o-icon_size-m);

      --card-content-gap: 8px;
      --card-content-text-size: var(--o-font_size-tip2);
      --card-content-text-height: var(--o-line_height-tip2);

      --card-footer-gap: 8px;
      --card-footer-text-size: 10px;
      --card-footer-text-height: 16px;

      .o-card-cover-v {
        --card-cover-padding: 4px 4px 0;
      }

      .o-card-cover-h {
        --card-cover-padding: 4px 0 4px 4px;
      }

      .o-card-cover-hr {
        --card-cover-padding: 4px 4px 4px 0;
      }

      &.o-card-cover {
        --card-main-padding-h: 8px;
      }
    }
  }
}