[data-lk-component="image"] {
  display: block;
  width: 100%;
  height: auto;
  object-fit: var(--lk-image-fit, fill);
}

[data-lk-image-radius]:not([data-lk-image-radius="none"]):not([data-lk-image-radius="zero"]) {
  border-radius: var(--lk-size-md);
  overflow: hidden;
}


/* IMAGE RADII TESTING AREA - Remove for production  */
.radius-test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.radius-test-item {
  border: 1px solid #ccc;
  padding: 0.5rem;
  background: #f9f9f9;
  text-align: center;
}

.radius-test-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.radius-test-caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #333;
}


/* BORDER RADIUS
  The CSS pow() and round() functions may not work in many browsers yet because they're part of an experimental CSS spec (Values and Units Level 4) that lacks full support.

  I was unable to use var(--lk-size-2xl) as calculated with pow() and round(); */
[data-lk-image-border-radius="3xs"] {
  border-radius: var(--lk-size-3xs);
  overflow: hidden;

}

[data-lk-image-border-radius="2xs"] {
  border-radius: var(--lk-size-2xs);
  overflow: hidden;
}

[data-lk-image-border-radius="xs"] {
  border-radius: var(--lk-size-xs);
  overflow: hidden;
}

[data-lk-image-border-radius="sm"] {
  border-radius: var(--lk-size-sm);
  overflow: hidden;
}

[data-lk-image-border-radius="md"] {
  border-radius: var(--lk-size-md);
  overflow: hidden;
}

[data-lk-image-border-radius="lg"] {
  border-radius: var(--lk-size-lg);
  overflow: hidden;
}

[data-lk-image-border-radius="xl"] {
  border-radius: var(--lk-size-xl);
  overflow: hidden;
}

[data-lk-image-border-radius="2xl"] {
  border-radius: var(--lk-size-2xl);
  overflow: hidden;
}

[data-lk-image-border-radius="3xl"] {
  border-radius: var(--lk-size-3xl);
  overflow: hidden;
}

[data-lk-image-border-radius="4xl"] {
  border-radius: var(--lk-size-4xl);
  overflow: hidden;
}

/* IMAGE WIDTH AND HEIGHT TESTING AREA - Remove for production */
.size-test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.size-test-item {
  border: 1px solid #ccc;
  padding: 0.5rem;
  text-align: center;
  background: #f5f5f5;
}

.size-test-img {
  object-fit: cover;
  display: block;
}

.size-test-caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #333;
}

/* IMAGE WIDTH */
[data-lk-image-width="3xs"] {
  width: var(--lk-size-3xs);
  overflow: hidden;

}

[data-lk-image-width="2xs"] {
  width: var(--lk-size-2xs);
  overflow: hidden;
}

[data-lk-image-width="xs"] {
  width: var(--lk-size-xs);
  overflow: hidden;
}

[data-lk-image-width="sm"] {
  width: var(--lk-size-sm);
  overflow: hidden;
}

[data-lk-image-width="md"] {
  width: var(--lk-size-md);
  overflow: hidden;
}

[data-lk-image-width="lg"] {
  width: var(--lk-size-lg);
  overflow: hidden;
}

[data-lk-image-width="xl"] {
  width: var(--lk-size-xl);
  overflow: hidden;
}

[data-lk-image-width="2xl"] {
  width: var(--lk-size-2xl);
  overflow: hidden;
}

[data-lk-image-width="3xl"] {
  width: var(--lk-size-3xl);
  overflow: hidden;
}

[data-lk-image-width="4xl"] {
  width: var(--lk-size-4xl);
  overflow: hidden;
}

/* IMAGE HEIGHT */
[data-lk-image-height="3xs"] {
  height: var(--lk-size-3xs);
  overflow: hidden;

}

[data-lk-image-height="2xs"] {
  height: var(--lk-size-2xs);
  overflow: hidden;
}

[data-lk-image-height="xs"] {
  height: var(--lk-size-xs);
  overflow: hidden;
}

[data-lk-image-height="sm"] {
  height: var(--lk-size-sm);
  overflow: hidden;
}

[data-lk-image-height="md"] {
  height: var(--lk-size-md);
  overflow: hidden;
}

[data-lk-image-height="lg"] {
  height: var(--lk-size-lg);
  overflow: hidden;
}

[data-lk-image-height="xl"] {
  height: var(--lk-size-xl);
  overflow: hidden;
}

[data-lk-image-height="2xl"] {
  height: var(--lk-size-2xl);
  overflow: hidden;
}

[data-lk-image-height="3xl"] {
  height: var(--lk-size-3xl);
  overflow: hidden;
}

[data-lk-image-height="4xl"] {
  height: var(--lk-size-4xl);
  overflow: hidden;
}


/* OBJECT-FIT TESTING AREA - Remove for production */
.objectfit-test-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  figure {
    border: 1px solid #ccc;
    padding: 0.5rem;
    text-align: center;
    background: #f9f9f9;
  }

  [data-lk-image-object-fit] {
    width: 300px;
    height: 300px;
    background-color: #ddd;
  }
}


/* OBJECT-FIT MAPPING
Include inherit, initial, unset?
*/
[data-lk-image-object-fit="cover"] {
  object-fit: cover;
}

[data-lk-image-object-fit="contain"] {
  object-fit: contain;
}

[data-lk-image-object-fit="fill"] {
  object-fit: fill;
}

[data-lk-image-object-fit="none"] {
  object-fit: none;
}

[data-lk-image-object-fit="scale-down"] {
  object-fit: scale-down;
}



/* ASPECT TESTING AREA - Remove for production */
.aspect-test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.aspect-test-item {
  border: 1px solid #ccc;
  padding: 0.5rem;
  text-align: center;
  background: #fafafa;
}

.aspect-test-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.aspect-test-caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #333;
}


/* IMAGE ASPECT RATIO MAPPING */
[data-lk-image-aspect="auto"] {
  aspect-ratio: auto;
}

[data-lk-image-aspect="1/1"] {
  aspect-ratio: 1 / 1;
}

[data-lk-image-aspect="2.39/1"] {
  aspect-ratio: 2.39 / 1;
}

[data-lk-image-aspect="2/1"] {
  aspect-ratio: 2 / 1;
}

[data-lk-image-aspect="16/9"] {
  aspect-ratio: 16 / 9;
}

[data-lk-image-aspect="3/2"] {
  aspect-ratio: 3 / 2;
}

[data-lk-image-aspect="4/3"] {
  aspect-ratio: 4 / 3;
}

[data-lk-image-aspect="5/4"] {
  aspect-ratio: 5 / 4;
}

[data-lk-image-aspect="1/2.39"] {
  aspect-ratio: 1 / 2.39;
}

[data-lk-image-aspect="1/2"] {
  aspect-ratio: 1 / 2;
}

[data-lk-image-aspect="9/16"] {
  aspect-ratio: 9 / 16;
}

[data-lk-image-aspect="4/5"] {
  aspect-ratio: 4 / 5;
}
