/* [project]/components/card/frame.css [app-client] (css) */
.frame {
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.frame:not(.frame--custom) {
  display: none;
}

.frame__ring {
  padding: max(3px, calc(var(--u) * 2));
  border-radius: inherit;
  -webkit-mask-composite: xor;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.frame__ring--mythic {
  background: conic-gradient(from 45deg, #fde68a, #f59e0b, #fff7d6, #b45309, #fde68a);
}

.frame__corner {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  filter: drop-shadow(0 0 3px #f59e0bcc);
  border: 2px solid #fde68a;
  min-width: 12px;
  min-height: 12px;
  position: absolute;
}

.frame__corner--tl {
  border-bottom: 0;
  border-right: 0;
  border-top-left-radius: 8px;
  top: 3px;
  left: 3px;
}

.frame__corner--tr {
  border-bottom: 0;
  border-left: 0;
  border-top-right-radius: 8px;
  top: 3px;
  right: 3px;
}

.frame__corner--bl {
  border-top: 0;
  border-right: 0;
  border-bottom-left-radius: 8px;
  bottom: 3px;
  left: 3px;
}

.frame__corner--br {
  border-top: 0;
  border-left: 0;
  border-bottom-right-radius: 8px;
  bottom: 3px;
  right: 3px;
}