/* ===========================
   AAM Divider Utilities
   ===========================
   Usage:
   - Add class .aam-divider to any element
   - Then add one or more of:
       .aam-divider-top
       .aam-divider-bottom
       .aam-divider-left
       .aam-divider-right
       .aam-divider-box
   - Use manual join overrides (below) if you need flush corners
   - Override variables per element in Bricks as needed
   =========================== */

:where(.aam-divider) {
  /* Shared defaults */
  --divider-color: var(--neutral-light, #e5e7eb);
  --divider-thickness: 2px;
  --divider-style: solid;      /* solid | dashed | dotted */
  --h-length: 100%;            /* horizontal line length (e.g. 60%, 200px) */
  --v-length: 100%;            /* vertical line length (e.g. 60%, 200px) */
  --align-x: 50;               /* 0 = left, 50 = center, 100 = right */
  --align-y: 50;               /* 0 = top, 50 = middle, 100 = bottom */

  /* Gaps */
  --gap-top: 1em;
  --gap-bottom: 1em;
  --gap-left: 1em;
  --gap-right: 1em;

  /* Box-only */
  --box-inset: 0em;
  --box-radius: 0;
  --box-pad: 1em;

  position: relative;
}

/* TOP divider (in-flow) */
.aam-divider-top::before {
  content: "";
  display: block;
  width: var(--h-length);
  height: 0;
  border-top: var(--divider-thickness) var(--divider-style) var(--divider-color);
  margin: var(--gap-top) auto var(--gap-bottom);
  transform: translateX(calc(var(--align-x) * 1% - 50%));
}

/* BOTTOM divider (in-flow) */
.aam-divider-bottom::after {
  content: "";
  display: block;
  width: var(--h-length);
  height: 0;
  border-top: var(--divider-thickness) var(--divider-style) var(--divider-color);
  margin: var(--gap-top) auto var(--gap-bottom);
  transform: translateX(calc(var(--align-x) * 1% - 50%));
}

/* LEFT divider (overlay) */
.aam-divider-left { padding-left: var(--gap-left); }
.aam-divider-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--align-y) * 1%);
  transform: translateY(calc(var(--align-y) * -1%));
  height: var(--v-length);
  width: 0;
  border-left: var(--divider-thickness) var(--divider-style) var(--divider-color);
  pointer-events: none;
}

/* RIGHT divider (overlay) */
.aam-divider-right { padding-right: var(--gap-right); }
.aam-divider-right::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(var(--align-y) * 1%);
  transform: translateY(calc(var(--align-y) * -1%));
  height: var(--v-length);
  width: 0;
  border-right: var(--divider-thickness) var(--divider-style) var(--divider-color);
  pointer-events: none;
}

/* BOX divider (overlay frame) */
.aam-divider-box {
  padding: var(--box-pad);
}
.aam-divider-box::before {
  content: "";
  position: absolute;
  inset: var(--box-inset);
  border: var(--divider-thickness) var(--divider-style) var(--divider-color);
  border-radius: var(--box-radius);
  pointer-events: none;
}