section#mat {
  .mat-card {
    position: absolute;
    --card-height: 100px;
    width: auto !important;
    height: var(--card-height);
    aspect-ratio: var(--card-ratio);
    transform-style: preserve-3d;
    .card-img-wrap {
      transform-style: preserve-3d;
      position: relative;
      margin: auto auto;
      top: 2%;
      height: 96%;
      width: 96%;
      transform: translateZ(calc((var(--z) + var(--sub-z)) * 1px + 0.1px))
        rotateY(calc(var(--ry) * 1deg));
      transition: 0.2s scale;
      cursor: pointer;
      &:hover {
      }
      .card-cover,
      .card-back {
        width: 100% !important;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 2px;
        overflow: hidden;
      }
      .card-cover {
        z-index: 1;
        transform: translateZ(0.5px);
      }
      &.focus .card-cover {
        animation: focus 0.6s ease-in-out;
      }
      .card-back {
        z-index: 0;
        transform: translateZ(0px);
      }
    }
    .card-shadow {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: transparent;
      // filter: blur(2px);
    }

    // 卡片被选中后的流光特效
    // ref: https://github.com/Mr-majifu/Animated-Profile-Card02/blob/master/style.css
    .card-streamer {
      position: absolute;
      inset: 0;
      background: #000;
      overflow: hidden;
    }
    .card-streamer::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 400%;
      height: 80%;
      background: linear-gradient(
        transparent,
        #45f3ff,
        #45f3ff,
        #45f3ff,
        transparent
      );
      animation: stream 2s linear infinite;
    }
    .card-streamer::after {
      content: "";
      position: absolute;
      /* https://developer.mozilla.org/en-US/docs/Web/CSS/inset */
      inset: 3px;
      background: #292929;
    }
    @keyframes stream {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .card-focus {
      position: absolute;
      width: calc(100% * var(--focus-scale));
      height: calc(100% * var(--focus-scale));
      left: calc((var(--focus-scale) - 1) * -50%);
      top: calc((var(--focus-scale) - 1) * -50%);
      outline: 3px solid #ddd;
      filter: blur(calc(2px * 1.3 * var(--focus-scale)));
      display: var(--focus-display);
      opacity: var(--focus-opacity);
    }
  }
}

.mat-card.highlight .card-shadow {
  --card-shadow-color: #0099ff;
  display: block !important;
  background: var(--card-shadow-color) !important;
  border-radius: 5px;
  box-shadow: 0 0 4px 0 var(--card-shadow-color), 0 0 25px 2px #0099ff87;
  transform: translateZ(calc((var(--z)) * 1px + 0.1px));
}

@keyframes focus {
  0% {
    filter: brightness(1) contrast(1);
  }
  50% {
    filter: brightness(1.5) contrast(1.1);
  }
  100% {
    filter: brightness(1) contrast(1);
  }
}

.card-dropdown {
  .ant-dropdown-menu {
    background-color: #333;
  }
  text-align: center;
}
