.zn-divide {
  display: flex;
  flex-direction: column;

  & > *:not(:first-child) {
    border-top: 1px solid rgb(var(--zn-border-color));
  }

  & > div:empty + div:not(:first-child) {
    /** Support Empty Divs only - custom elements can be empty and have content **/
    border-top: 0;
  }
}

.zn-divide-y {
  display: flex;
  flex-direction: row;

  & > *:not(:first-child):not(:empty) {
    border-left: 1px solid rgb(var(--zn-border-color));
  }
}

.zn-c-pad {
  --zn-pad-spacing: var(--zn-spacing-large);
}

.zn-c-pad-x > * {
  padding-left: var(--zn-pad-spacing);
  padding-right: var(--zn-pad-spacing);
}

.zn-c-pad-y > * {
  &:not(:first-child) {
    padding-top: var(--zn-pad-spacing);
  }

  &:not(:last-child) {
    padding-bottom: var(--zn-pad-spacing);
  }
}