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

.o-card {
  background-color: var(--card-bg-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  text-decoration: none;
}

.o-card-cover {
  flex-shrink: 0;
  padding: var(--card-cover-padding);
}

.o-card-cover-img {
  max-height: 100%;
  width: 100%;
  border-radius: var(--card-cover-radius);

  img {
    border-radius: var(--card-cover-radius);
  }

  &.is-full {
    height: 100%;
  }
}

.o-card-icon {
  color: var(--card-icon-color);
  font-size: var(--card-icon-size);
  text-align: var(--card-icon-text-align);
}

.o-card-header {
  font-size: var(--card-header-text-size);
  line-height: var(--card-header-text-height);
  color: var(--card-header-color);
}

.o-card-header-with-icon {
  position: relative;

  .o-card-title {
    text-indent: calc(var(--card-title-icon-size) + var(--card-title-icon-gap));
  }
}

.o-card-title-icon {
  width: var(--card-title-icon-size);
  height: var(--card-title-icon-size);
  position: absolute;
  top: calc((var(--card-header-text-height) - var(--card-title-icon-size)) / 2);
  font-size: var(--card-title-icon-size);
}

.o-card-title-icon-figure {
  width: 100%;
}

.o-card-title {
  height: calc(var(--card-title-row) * var(--card-header-text-height));
  margin: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: var(--card-title-text-align);
  word-break: var(--card-title-word-break);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-title-max-row);
  -webkit-box-orient: vertical;
}

.o-card-main {
  padding: var(--card-main-padding);
  height: 100%;
}

.o-card-main-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.o-card-content {
  font-size: var(--card-content-text-size);
  line-height: var(--card-content-text-height);
  color: var(--card-content-color);

  .o-card-header + & {
    margin-top: var(--card-content-gap);
  }
}

.o-card-detail {
  height: calc(var(--card-detail-row) * var(--card-content-text-height));
  max-height: calc(var(--card-detail-max-row) * var(--card-content-text-height));
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: var(--card-detail-text-align);
  word-break: var(--card-detail-word-break);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-detail-max-row);
  -webkit-box-orient: vertical;
}

.o-card-detail-limited {
  --card-detail-mask-bg-color: var(--o-grey-1);
  --card-detail-mask-width: 4em;

  position: relative;
  display: block;
  text-overflow: clip;

  &::after {
    background-image: linear-gradient(
      90deg,
      rgba(var(--card-detail-mask-bg-color), 0),
      rgba(var(--card-detail-mask-bg-color), 0.8) 66%,
      rgba(var(--card-detail-mask-bg-color)) 100%
    );
    bottom: 0;
    content: '';
    pointer-events: none;
    position: absolute;
    right: 0;
    width: var(--card-detail-mask-width);
    height: var(--card-content-text-height);
  }
}

[data-o-theme*='dark'] {
  .o-card-detail-limited {
    // 其实应该是--o-color-fill2的，但是不支持透明度，所以用原始值，同卡片背景色
    --card-detail-mask-bg-color: var(--o-grey-4);
  }
}

.o-card-hoverable {
  position: relative;
  transition: box-shadow var(--o-easing-standard) var(--o-duration-m2);
  @include hover {
    box-shadow: var(--card-shadow-hover);
  }
  &:active {
    box-shadow: var(--card-shadow-active);
  }
}

.o-card-hoverable.o-card-cursor-pointer {
  @include hover {
    .o-card-cover img {
      transform: scale(1.05);
    }
  }
  &:active {
    .o-card-cover img {
      transform: scale(1.02);
    }
  }
}

.o-card-footer {
  margin-top: var(--card-footer-gap);
  font-size: var(--card-footer-text-size);
  line-height: var(--card-footer-text-height);
  color: var(--card-footer-color);
}

.o-card-layout-v {
  display: flex;
  flex-direction: column;

  .o-card-main {
    display: flex;
    flex-direction: column;
  }

  .o-card-icon {
    margin-bottom: var(--card-icon-gap);
  }
}

.o-card-layout-h {
  display: flex;
  flex-direction: row;

  .o-card-main {
    display: flex;
    flex-direction: row;
  }

  .o-card-icon {
    margin-right: var(--card-icon-gap);
    width: var(--card-icon-size);
  }
}

.o-card-layout-hr {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;

  .o-card-main {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .o-card-icon {
    margin-left: var(--card-icon-gap);
    width: var(--card-icon-size);
  }
}

.o-card-cover-h,
.o-card-cover-hr {
  width: var(--card-h-cover-width);
  max-width: var(--card-h-cover-max-width);
  display: flex;
  align-items: center;
}

.o-card-cursor-pointer {
  cursor: pointer;
}