/* start finding a way to get rid of borders in svgs */
/*
img:not([data-type="string"]) {
  border: 0 !important;
}
*/

/* LIGHT SECTIONS */
/* ************** */

/* target all light sections background color */
section[class*="lb-"]:where(:not([class*="--dark"])) {
  background-color: var(--base-ultra-light);
}

/* target all light sections p tags */
section[class*="lb-"]:where(:not([class*="--dark"])) :where(p) {
  color: var(--base-semi-dark);
  /* color: deeppink !important; */
  /* border: 1px solid deeppink; */
}

/* target all light sections h tags */
section[class*="lb-"]:where(:not([class*="--dark"])) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--base-semi-dark);
  /* color: firebrick !important; */
  /* border: 1px solid firebrick; */
}

/* target all light sections img tags */
section[class*="lb-"]:where(:not([class*="--dark"])) :where(img):not([data-type="string"]) {
  /* border: 5px solid lime !important; */
  border: 1px solid var(--base-light);
  border-radius: var(--radius);
  overflow: hidden;
}

/* *************************************** */
/* Image border - Gallery Grid / Image Group */
:not(section)[class*="lb-gallery-grid-"] :where(img),
:not(section)[class*="lb-image-group-"] :where(img) {
  /* border: 5px solid lime !important; */
  border: 1px solid var(--base-light);
  border-radius: var(--radius);
}

/* DARK SECTIONS */
/* ************* */

/* target all dark sections background color */
section[class*="lb-"][class*="--dark"] {
  background-color: var(--base-ultra-dark);
}

/* target all dark sections p tags */
section[class*="lb-"][class*="--dark"] :where(p) {
  color: var(--base-light);
  /* color: yellow !important; */
  /* border: 1px solid yellow; */
}

/* target all dark sections h tags */
section[class*="lb-"][class*="--dark"] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--base-ultra-light);
  /* color: lime !important; */
  /* border: 1px solid lime; */
}

/* target all dark sections img tags */
section[class*="lb-"][class*="--dark"] :where(img):not([data-type="string"]) {
  /* border: 5px solid lime !important; */
  border: 1px solid var(--base-light);
  border-radius: var(--radius);
  overflow: hidden;
}

/************************************************* */
/* targets the body of all light elements without section */
:not(section) body:has([class*="lbx-delete-me-"]):where(:not([class*="dark-"])) {
  /* background-color: lime; */
  background-color: var(--base-ultra-light);
}

/* targets the body of all dark elements without section */
:not(section) body:has([class*="lbx-delete-me-dark-"]) {
  /* background-color: lime; */
  background-color: var(--base-ultra-dark);
}

/* target all light and dark single elements with some formatting  */
:not(section)[class*="lbx-delete-me-"] {
  margin-inline: auto;
  padding-block: 50px;
}

/* target all single elements with a 384px width  */
:not(section)[class*="lbx-delete-me-"][class*="384px"] {
  width: 384px;
}

/* target all single elements with a 480px width  */
:not(section)[class*="lbx-delete-me-"][class*="480px"] {
  width: 480px;
}

/* target all single elements with a 640px width  */
:not(section)[class*="lbx-delete-me-"][class*="640px"] {
  width: 640px;
}

/* target all single elements with a 960px width  */
:not(section)[class*="lbx-delete-me-"][class*="960px"] {
  width: 960px;
}

/* target all single elements with a 1366px width  */
:not(section)[class*="lbx-delete-me-"][class*="1366px"] {
  width: 1366px;
}