$name: 'ivue-card';

:root {
  // size
  --#{$name}-radius: 4px;
  --#{$name}-font-size: 14px;
  --#{$name}-top-bottom-padding: 14px;
  --#{$name}-left-right-padding: 16px;

  // color
  --#{$name}-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  --#{$name}-shadow-border-color: #eeeeee;
}

.#{$name} {
  display: block;
  background: var(--ivue-white-color);
  border-radius: var(--#{$name}-radius);
  font-size: var(--#{$name}-font-size);
  position: relative;
  transition: var(--ivue-all-transition);

  &:hover {
    box-shadow: var(--#{$name}-shadow);
    border-color: var(--#{$name}-shadow-border-color);
  }

  // 阴影
  &-shadow {
    box-shadow: var(--#{$name}-shadow);
    border-color: var(--#{$name}-shadow-border-color);
  }

  // 是否显示边框，建议在灰色背景下使用
  &-border {
    border: 1px solid var(--ivue-border-multiple-color);
  }

  // 标题
  &-title {
    border-bottom: 1px solid var(--ivue-border-multiple-color);
    padding: var(--#{$name}-top-bottom-padding)
      var(--#{$name}-left-right-padding);
    line-height: 1;
  }

  // 额外显示的内容，默认位置在右上角
  &-extra {
    position: absolute;
    right: var(--#{$name}-left-right-padding);
    top: var(--#{$name}-top-bottom-padding);
    line-height: 1;
  }

  // 内容
  &-body {
    padding: var(--#{$name}-left-right-padding);
  }

  // 禁用鼠标悬停显示阴影
  &-dis-hover {
    &:hover {
      box-shadow: none;
      border-color: var(--ivue-border-multiple-color);
    }
  }
}