/* L-bracket corner decorations.
   Apply .l-brackets to a relatively-positioned container. Top-left and
   top-right corners are drawn via ::before / ::after with 1px borders.
   Use .l-brackets--all to also decorate the bottom two corners via
   inner <span> elements (which the markup must include). */

.l-brackets { position: relative; }

.l-brackets::before,
.l-brackets::after {
  content: "";
  position: absolute;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
  border: 0 solid color-mix(in oklch, var(--brand-teal) 55%, transparent);
}

.l-brackets::before {
  left: 1rem;
  border-left-width: 1px;
  border-top-width: 1px;
}

.l-brackets::after {
  right: 1rem;
  border-right-width: 1px;
  border-top-width: 1px;
}

/* Optional bottom corners via two dedicated spans in the markup */
.l-brackets__bl,
.l-brackets__br {
  position: absolute;
  bottom: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
  border: 0 solid color-mix(in oklch, var(--brand-teal) 55%, transparent);
}
.l-brackets__bl {
  left: 1rem;
  border-left-width: 1px;
  border-bottom-width: 1px;
}
.l-brackets__br {
  right: 1rem;
  border-right-width: 1px;
  border-bottom-width: 1px;
}