.mat-card {
  position: absolute;
  --card-height: 100px;
  width: auto !important;
  height: var(--card-height);
  aspect-ratio: var(--card-ratio);
  transform-style: preserve-3d;
  .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;
    .cover,
    .back {
      width: 100% !important;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      // border-radius: 2px; // 这里好像会导致卡片分辨率降低
      overflow: hidden;
    }
    .cover {
      z-index: 1;
      transform: translateZ(0.5px);
    }
    &.focusing .cover {
      animation: focus 0.6s ease-in-out;
    }
    .back {
      z-index: 0;
      transform: translateZ(0px);
    }
  }
  .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
  .streamer {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
  }
  .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;
  }
  .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);
    }
  }

  .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);
  }
}

.frame {
  display: block !important;
  background: var(--shadow-color) !important;
  border-radius: 5px;
  transform: translateZ(calc((var(--z)) * 1px + 0.1px));
  animation: shadow-fadding 2s infinite ease-in-out;
}

@keyframes shadow-fadding {
  0% {
    box-shadow: 0 0 4px 0 var(--shadow-color), 0 0 25px 2px #0099ff87;
  }
  50% {
    box-shadow: none;
  }
  100% {
    box-shadow: 0 0 4px 0 var(--shadow-color), 0 0 25px 2px #0099ff87;
  }
}

.mat-card.glowing .shadow {
  --shadow-color: #0099ff;
  @extend .frame;
}

.mat-card.shining {
  --shadow-color: #f4ff00;
  @extend .frame;
}

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

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

.dropdown-disabled {
  display: none;
}
