@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
@use '@style/mixins/index.scss' as *;
@use '@components/card/style/token.scss' as token;
@use '@components/card/style/token.scss' as *;

$card-prefix-cls: string.unquote('#{theme.$prefix}-card');

@function token-var($name, $fallback: null) {
  $value: map.get(meta.module-variables('token'), $name);

  @if $value == null {
    @return $fallback;
  }

  @return $value;
}

.#{$card-prefix-cls} {
  position: relative;
  background: $card-color-bg;
  border-radius: $card-border-radius-no-border;
  transition: box-shadow theme.$transition-duration-2 theme.$transition-timing-function-standard;

  &-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: $card-border-width-title-bottom solid $card-color-border;

    &-no-title::before {
      display: block;
      content: ' ';
    }

    &-title {
      flex: 1;
      color: $card-color-title;
      font-weight: $card-font-weight-title;
      line-height: theme.$line-height-base;

      @include text-ellipsis();
    }

    &-extra {
      color: $card-color-title-extra;

      @include text-ellipsis();
    }
  }

  &-body {
    color: $card-color-body;
  }

  &-cover {
    overflow: hidden;

    > * {
      display: block;
      width: 100%;
    }
  }

  &-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: $card-margin-top-meta-footer;

    &::before {
      visibility: hidden;
      content: '';
    }

    &-right {
      display: flex;
      align-items: center;
    }

    &-item {
      display: flex;
      align-items: center;
      justify-content: center;
      color: $card-color-action;
      cursor: pointer;
      transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;

      @include text-ellipsis();

      &:hover {
        color: $card-color-action_hover;
      }

      &:not(:last-child) {
        margin-right: $card-margin-right-action-item;
      }
    }
  }

  &-meta {
    &-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:last-child {
        margin-top: $card-margin-top-meta-footer;
      }

      &-only-actions::before {
        visibility: hidden;
        content: '';
      }

      .#{$card-prefix-cls}-actions {
        margin-top: 0;
      }
    }

    &-title {
      color: $card-color-title;
      font-weight: $card-font-weight-title;

      @include text-ellipsis();
    }

    &-description:not(:first-child) {
      margin-top: $card-margin-top-meta-description;
    }
  }

  &-grid {
    position: relative;
    box-sizing: border-box;
    width: 33.33%;
    box-shadow:
      $card-border-width 0 0 0 $card-color-border,
      0 $card-border-width 0 0 $card-color-border,
      $card-border-width $card-border-width 0 0 $card-color-border,
      $card-border-width 0 0 0 $card-color-border inset,
      0 $card-border-width 0 0 $card-color-border inset;

    &::before {
      position: absolute;
      inset: 0;
      transition: box-shadow theme.$transition-duration-2 theme.$transition-timing-function-standard;
      content: '';
      pointer-events: none;
    }

    &-hoverable:hover {
      z-index: 1;

      &::before {
        box-shadow: 0 4px 10px $card-color-box-shadow;
      }
    }

    // 避免 Card 的背景色遮住由 box-shadow 实现的 Grid 的边框
    .#{$card-prefix-cls} {
      background: none;
      box-shadow: none;
    }
  }

  // 以下为特殊状态的补充
  &-contain-grid:not(#{&}-loading) > &-body {
    display: flex;
    flex-wrap: wrap;
    margin: 0 (-$card-border-width);
    padding: 0;
  }

  &-hoverable:hover {
    box-shadow: 0 4px 10px $card-color-box-shadow;
  }

  &-bordered {
    border: $card-border-width solid $card-color-border;
    border-radius: $card-border-radius;

    .#{$card-prefix-cls}-cover {
      border-radius: $card-border-radius $card-border-radius 0 0;
    }
  }

  &-loading &-body {
    overflow: hidden;
    text-align: center;
  }

  // 不同尺寸
  @mixin size($name, $size) {
    &-size-#{$name} {
      font-size: token-var('card-size-#{$size}-font-size');

      .#{$card-prefix-cls}-header {
        height: token-var('card-size-#{$size}-height-title');
        padding: token-var('card-size-#{$size}-padding-vertical-title')
          token-var('card-size-#{$size}-padding-horizontal-title');
      }

      .#{$card-prefix-cls}-header-title,
      .#{$card-prefix-cls}-meta-title {
        font-size: token-var('card-size-#{$size}-font-size-title');
      }

      .#{$card-prefix-cls}-header-extra {
        font-size: token-var('card-size-#{$size}-font-size-title-extra');
      }

      .#{$card-prefix-cls}-body {
        padding: token-var('card-size-#{$size}-padding-vertical-body')
          token-var('card-size-#{$size}-padding-horizontal-body');
      }
    }
  }

  @include size(medium, default);
  @include size(small, small);
}

// full-height：撑满父容器高度，内容区域自动滚动
.#{$card-prefix-cls}-full-height {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .#{$card-prefix-cls}-header {
    flex-shrink: 0;
  }

  .#{$card-prefix-cls}-body {
    flex: 1;
    min-height: 0;
  }

  // scrollbar === false：使用原生 overflow 滚动
  .#{$card-prefix-cls}-body-native {
    overflow: auto;
  }

  // scrollbar !== false：使用 Scrollbar 组件
  .#{$card-prefix-cls}-body-scroll {
    overflow: hidden;

    .#{$card-prefix-cls}-body-scrollbar {
      height: 100%;
    }
  }
}

// dark mode
#{global.$sd-theme-tag}[sd-theme='dark'] {
  .#{$card-prefix-cls}-grid-hoverable:hover::before,
  .#{$card-prefix-cls}-hoverable:hover {
    box-shadow: 0 4px 10px $card-color-box-shadow_dark;
  }
}