[data-lk-component="button"] {
  /* DEFAULTS */
  --button-font-size: var(--body-font-size);
  --button-line-height: var(--lk-halfstep) !important;
  --button-padX: var(--button-font-size);
  --button-padY: calc(var(--button-font-size) * calc(var(--lk-halfstep) / var(--lk-size-xl-unitless)));
  --button-padX-sideWithIcon: calc(var(--button-font-size) / var(--lk-wholestep));
  --button-gap: calc(var(--button-padY) / var(--lk-eighthstep));
  cursor: pointer;

  display: inline-flex;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 100em;
  position: relative;
  text-decoration: none;
  white-space: pre;
  word-break: keep-all;
  overflow: hidden;
  padding: var(--button-padY) 1em;
  font-weight: 500;
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  font-family: inherit;
}

/* SIZE VARIANTS */
[data-lk-button-size="sm"] {
  --button-font-size: var(--subheading-font-size);
}

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

/* ICON-BASED PADDING ADJUSTMENTS */
[data-lk-component="button"]:has([data-lk-icon-position="start"]) {
  padding-left: var(--button-padX-sideWithIcon);
  padding-right: var(--button-padX);
}

[data-lk-component="button"]:has([data-lk-icon-position="end"]) {
  padding-left: 1em;
  padding-right: var(--button-padX-sideWithIcon);
}

[data-lk-component="button"]:has([data-lk-icon-position="start"]):has([data-lk-icon-position="end"]) {
  padding-left: var(--button-padX-sideWithIcon);
  padding-right: var(--button-padX-sideWithIcon);
}

/* CONTENT WRAPPER */
[data-lk-button-content-wrap="true"] {
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
}

/* TODO: Remove entirely */

/* [data-lk-component="button"] div:has(> [data-lk-component="icon"]) {
  width: calc(1em * var(--lk-halfstep));
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
} */

/* ICON VERTICAL OPTICAL ALIGNMENTS */

[data-lk-button-optic-icon-shift="true"] div:has(> [data-lk-component="icon"]) {
  margin-top: calc(-1 * calc(1em * var(--lk-quarterstep-dec)));
}

/* STYLE VARIANTS */

[data-lk-button-variant="text"] {
  background: transparent !important;
}
[data-lk-button-variant="outline"] {
  background: transparent !important;
  border: 1px solid var(--lk-outlinevariant);
}
