[data-lk-component="icon-button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 100em;
  /* border: 1px solid transparent; */
  padding: var(--lk-size-xs);
  font-weight: 500;
  background: none;
  overflow: hidden;
  cursor: pointer;
}

[data-lk-component="icon-button"]>[data-lk-button-content-wrap] {
  display: flex;
  justify-content: center;
  align-items: center;
}





/* [data-lk-component="icon-button"]>[data-lk-component="state-layer"] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--lk-primary);
  opacity: 0;
  transition:
    background-color 0.2s ease-out,
    opacity 0.2s ease-out;
} */

/* STATE LAYER OPACITY
[data-lk-component="icon-button"]:hover>[data-lk-component="state-layer"] {
  opacity: 0.04;
}

[data-lk-component="icon-button"]:active>[data-lk-component="state-layer"],
[data-lk-component="icon-button"]:focus-visible>[data-lk-component="state-layer"] {
  opacity: 0.1;
} */

/* Size map
[data-lk-icon-button-size="xs"] {
  font-size: var(--caption-font-size);
}

[data-lk-icon-button-size="sm"] {
  font-size: var(--caption-line-height);
}

[data-lk-icon-button-size="md"] {
  font-size: var(--heading-font-size);
}

[data-lk-icon-button-size="lg"] {
  font-size: var(--title3-font-size);
}

[data-lk-icon-button-size="xl"] {
  font-size: var(--title2-font-size);
} */

/* COLORS */
[data-lk-icon-button-color="primary"] {
  background-color: var(--lk-primary);
  color: var(--lk-onprimary);
}

[data-lk-icon-button-color="primarycontainer"] {
  background-color: var(--lk-primarycontainer);
  color: var(--lk-onprimarycontainer);
}

[data-lk-icon-button-color="secondary"] {
  background-color: var(--lk-secondary);
  color: var(--lk-onsecondary);
}

[data-lk-icon-button-color="secondarycontainer"] {
  background-color: var(--lk-secondarycontainer);
  color: var(--lk-onsecondarycontainer);
}

[data-lk-icon-button-color="tertiary"] {
  background-color: var(--lk-tertiary);
  color: var(--lk-ontertiary);
}

[data-lk-icon-button-color="tertiarycontainer"] {
  background-color: var(--lk-tertiarycontainer);
  color: var(--lk-ontertiarycontainer);
}

[data-lk-icon-button-color="error"] {
  background-color: var(--lk-error);
  color: var(--lk-onerror);
}

[data-lk-icon-button-color="errorcontainer"] {
  background-color: var(--lk-errorcontainer);
  color: var(--lk-onerrorcontainer);
}

[data-lk-icon-button-color="success"] {
  background-color: var(--lk-success);
  color: var(--lk-onsuccess);
}

[data-lk-icon-button-color="successcontainer"] {
  background-color: var(--lk-successcontainer);
  color: var(--lk-onsuccesscontainer);
}

[data-lk-icon-button-color="warning"] {
  background-color: var(--lk-warning);
  color: var(--lk-onwarning);
}

[data-lk-icon-button-color="warningcontainer"] {
  background-color: var(--lk-warningcontainer);
  color: var(--lk-onwarningcontainer);
}

[data-lk-icon-button-color="info"] {
  background-color: var(--lk-info);
  color: var(--lk-oninfo);
}

[data-lk-icon-button-color="infocontainer"] {
  background-color: var(--lk-infocontainer);
  color: var(--lk-oninfocontainer);
}

[data-lk-icon-button-color="surface"] {
  background-color: var(--lk-surface);
  color: var(--lk-onsurface);
}

[data-lk-icon-button-color="surfacecontainer"] {
  background-color: var(--lk-surfacecontainer);
  color: var(--lk-onsurfacecontainer);
}

[data-lk-icon-button-color="surfacevariant"] {
  background-color: var(--lk-surfacevariant);
  color: var(--lk-onsurfacevariant);
}

[data-lk-icon-button-color="surfacecontainerlowest"] {
  background-color: var(--lk-surfacecontainerlowest);
  color: var(--lk-onsurfacecontainerlowest);
}

[data-lk-icon-button-color="surfacecontainerlow"] {
  background-color: var(--lk-surfacecontainerlow);
  color: var(--lk-onsurfacecontainerlow);
}

[data-lk-icon-button-color="surfacecontainerhigh"] {
  background-color: var(--lk-surfacecontainerhigh);
  color: var(--lk-onsurfacecontainerhigh);
}

[data-lk-icon-button-color="surfacecontainerhighest"] {
  background-color: var(--lk-surfacecontainerhighest);
  color: var(--lk-onsurfacecontainerhighest);
}

[data-lk-icon-button-color="inversesurface"] {
  background-color: var(--lk-inversesurface);
  color: var(--lk-oninversesurface);
}

/* VARIANT OUTLINE */
[data-lk-icon-button-variant="outline"] {
  border: solid 1px var(--lk-outlinevariant);
  background-color: transparent;
}

/* VARIANT TEXT */
[data-lk-icon-button-variant="text"] {
  background-color: transparent;
}
