/* ===========================
   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
      - 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: 0em;
  --gap-bottom: 0em;
  --gap-left: 1em;
  --gap-right: 1em;

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

  position: relative;
}

/* Base styles for all dividers */
.aam-divider-top::before,
.aam-divider-bottom::after,
.aam-divider-left::before,
.aam-divider-right::after,
.aam-divider-box::before {
  content: "";
  pointer-events: none; /* Good practice for decorative elements */
}

/* Horizontal dividers (in-flow) */
.aam-divider-top::before,
.aam-divider-bottom::after {
  display: block;
  width: var(--h-length);
  height: 0;
  border-top: var(--divider-thickness) var(--divider-style) var(--divider-color);
  transform: translateX(calc(var(--align-x) * 1% - 50%));
}

.aam-divider-top::before {
  margin: var(--gap-top) auto var(--gap-bottom);
}

.aam-divider-bottom::after {
  margin: var(--gap-top) auto var(--gap-bottom);
}

/* Vertical dividers (overlay) */
.aam-divider-left::before,
.aam-divider-right::after {
  position: absolute;
  top: calc(var(--align-y) * 1%);
  transform: translateY(calc(var(--align-y) * -1%));
  height: var(--v-length);
  width: 0;
}

.aam-divider-left {
  padding-left: var(--gap-left);
}
.aam-divider-left::before {
  left: 0;
  border-left: var(--divider-thickness) var(--divider-style) var(--divider-color);
}

.aam-divider-right {
  padding-right: var(--gap-right);
}
.aam-divider-right::after {
  right: 0;
  border-right: var(--divider-thickness) var(--divider-style) var(--divider-color);
}

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