/*
 * Encaixes concavos de cards sobre uma imagem. Aplicar no Container do card.
 * bmq-card-curves / bmq-card-curves-bottom-left: card no canto inferior esquerdo.
 * bmq-card-curves-top-left: card no canto superior esquerdo.
 * Curvas avulsas: bmq-card-curve-top, bmq-card-curve-right,
 * bmq-card-curve-right-top e bmq-card-curve-bottom-left.
 * Manter overflow visivel no card e no Container da imagem.
 * Ajustes opcionais: --bmq-card-curve-size-d/-t/-m (padrao: 24px) e
 * --bmq-card-curve-color (padrao: cor da borda). Nao altera posicionamento.
 */
:where(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curves-top-left, .bmq-card-curve-top, .bmq-card-curve-right, .bmq-card-curve-right-top, .bmq-card-curve-bottom-left) {
  --bmq-card-curve-size-d: 24px;
  --bmq-card-curve-size-t: var(--bmq-card-curve-size-d);
  --bmq-card-curve-size-m: var(--bmq-card-curve-size-t);
  --bmq-card-curve-size: var(--bmq-card-curve-size-d);
  --bmq-card-curve-anchor: top right;
  --bmq-card-curve-top: var(--bmq-c-bw-d-t, 0px);
  --bmq-card-curve-right: var(--bmq-c-bw-d-r, 0px);
  --bmq-card-curve-bottom: var(--bmq-c-bw-d-b, 0px);
  --bmq-card-curve-paint: var(--bmq-card-curve-color, var(--bmq-c-bc, #fff));
}
:where(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curves-top-left, .bmq-card-curve-top, .bmq-card-curve-right, .bmq-card-curve-right-top, .bmq-card-curve-bottom-left):hover {
  --bmq-card-curve-top: var(--bmq-c-hbw-d-t, var(--bmq-c-bw-d-t, 0px));
  --bmq-card-curve-right: var(--bmq-c-hbw-d-r, var(--bmq-c-bw-d-r, 0px));
  --bmq-card-curve-bottom: var(--bmq-c-hbw-d-b, var(--bmq-c-bw-d-b, 0px));
  --bmq-card-curve-paint: var(--bmq-card-curve-color, var(--bmq-c-hbc, var(--bmq-c-bc, #fff)));
}
:where(.bmq-card-curves-top-left, .bmq-card-curve-right-top, .bmq-card-curve-bottom-left) {
  --bmq-card-curve-anchor: bottom right;
}

:is(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curve-top, .bmq-card-curves-top-left, .bmq-card-curve-right-top)::before,
:is(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curve-right, .bmq-card-curves-top-left, .bmq-card-curve-bottom-left)::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--bmq-card-curve-anchor, top right),
    transparent calc(var(--bmq-card-curve-size) - 0.5px),
    var(--bmq-card-curve-paint) var(--bmq-card-curve-size));
}

/* Coordenadas absolutas partem da face interna da borda. As faixas
 * adicionais cobrem apenas a borda para conectar as curvas sem invadir o card. */
:is(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curve-top)::before {
  left: 0;
  top: calc(-1 * (var(--bmq-card-curve-size) + var(--bmq-card-curve-top)));
  width: var(--bmq-card-curve-size);
  height: calc(var(--bmq-card-curve-size) + var(--bmq-card-curve-top));
}
:is(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curve-right)::after {
  right: calc(-1 * (var(--bmq-card-curve-size) + var(--bmq-card-curve-right)));
  bottom: 0;
  width: calc(var(--bmq-card-curve-size) + var(--bmq-card-curve-right));
  height: var(--bmq-card-curve-size);
}
:is(.bmq-card-curves-top-left, .bmq-card-curve-right-top)::before {
  right: calc(-1 * (var(--bmq-card-curve-size) + var(--bmq-card-curve-right)));
  top: 0;
  width: calc(var(--bmq-card-curve-size) + var(--bmq-card-curve-right));
  height: var(--bmq-card-curve-size);
}
:is(.bmq-card-curves-top-left, .bmq-card-curve-bottom-left)::after {
  left: 0;
  bottom: calc(-1 * (var(--bmq-card-curve-size) + var(--bmq-card-curve-bottom)));
  width: var(--bmq-card-curve-size);
  height: calc(var(--bmq-card-curve-size) + var(--bmq-card-curve-bottom));
}

@media (max-width: 1024px) {
  :where(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curves-top-left, .bmq-card-curve-top, .bmq-card-curve-right, .bmq-card-curve-right-top, .bmq-card-curve-bottom-left) {
    --bmq-card-curve-size: var(--bmq-card-curve-size-t);
  --bmq-card-curve-top: var(--bmq-c-bw-t-t, var(--bmq-c-bw-d-t, 0px));
  --bmq-card-curve-right: var(--bmq-c-bw-t-r, var(--bmq-c-bw-d-r, 0px));
  --bmq-card-curve-bottom: var(--bmq-c-bw-t-b, var(--bmq-c-bw-d-b, 0px));
  }
  :where(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curves-top-left, .bmq-card-curve-top, .bmq-card-curve-right, .bmq-card-curve-right-top, .bmq-card-curve-bottom-left):hover {
  --bmq-card-curve-top: var(--bmq-c-hbw-t-t, var(--bmq-c-bw-t-t, var(--bmq-c-bw-d-t, 0px)));
  --bmq-card-curve-right: var(--bmq-c-hbw-t-r, var(--bmq-c-bw-t-r, var(--bmq-c-bw-d-r, 0px)));
  --bmq-card-curve-bottom: var(--bmq-c-hbw-t-b, var(--bmq-c-bw-t-b, var(--bmq-c-bw-d-b, 0px)));
  }
}

@media (max-width: 767px) {
  :where(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curves-top-left, .bmq-card-curve-top, .bmq-card-curve-right, .bmq-card-curve-right-top, .bmq-card-curve-bottom-left) {
    --bmq-card-curve-size: var(--bmq-card-curve-size-m);
  --bmq-card-curve-top: var(--bmq-c-bw-m-t, var(--bmq-c-bw-t-t, var(--bmq-c-bw-d-t, 0px)));
  --bmq-card-curve-right: var(--bmq-c-bw-m-r, var(--bmq-c-bw-t-r, var(--bmq-c-bw-d-r, 0px)));
  --bmq-card-curve-bottom: var(--bmq-c-bw-m-b, var(--bmq-c-bw-t-b, var(--bmq-c-bw-d-b, 0px)));
  }
  :where(.bmq-card-curves, .bmq-card-curves-bottom-left, .bmq-card-curves-top-left, .bmq-card-curve-top, .bmq-card-curve-right, .bmq-card-curve-right-top, .bmq-card-curve-bottom-left):hover {
  --bmq-card-curve-top: var(--bmq-c-hbw-m-t, var(--bmq-c-bw-m-t, var(--bmq-c-bw-t-t, var(--bmq-c-bw-d-t, 0px))));
  --bmq-card-curve-right: var(--bmq-c-hbw-m-r, var(--bmq-c-bw-m-r, var(--bmq-c-bw-t-r, var(--bmq-c-bw-d-r, 0px))));
  --bmq-card-curve-bottom: var(--bmq-c-hbw-m-b, var(--bmq-c-bw-m-b, var(--bmq-c-bw-t-b, var(--bmq-c-bw-d-b, 0px))));
  }
}