@import '_variables';

@mixin content_wrapper {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 2.5rem;

  @media (max-width: $MQNarrow) {
    padding: 2rem;
  }

  @media (max-width: $MQMobileNarrow) {
    padding: 1.5rem;
  }
}

@mixin dropdown_wrapper {
  transition: height 0.1s ease-out;
  overflow: hidden;
}

@mixin card_item {
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--t-transform);
  border-radius: var(--card-radius);
  background-color: var(--c-bg-darker);

  &:hover {
    box-shadow: var(--card-shadow-hover);
  }
}

@mixin flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flexStart {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@mixin flexEnd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@mixin flexBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/**
* css 文本省略
* @param $line 几行省略
*/
@mixin textEllipsis($line) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}

// 骨架屏动画
@mixin skeleton() {
  background-image: linear-gradient(130deg, var(--c-bg-dark) 25%, var(--c-bg) 35%, var(--c-bg-dark) 40%);
  background-size: 550% 100%;
  background-position: 10% 10%;
  animation: skeleton-loading var(--t-skeleton) infinite;

  @keyframes skeleton-loading {
    0% {
      background-position: 100% 0%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}