[data-cl-button] {
  --button-height: 40px;
  --button-padding: 0 20px;
  --button-border-radius: var(--br2);
  --button-font-size: var(--fs2);
  --button-font-weight: 500;

  --button-background: var(--color-primary);
  --button-color: white;
  --button-border: 1px solid var(--color-primary);

  --button-focus-box-shadow: var(--color-primary-ll) 0 0 0 4px;

  --button-active-opacity: 0.8;

  --button-hover-background-color: var(--button-background);
  --button-hover-opacity: 0.9;

  box-sizing: border-box;
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  margin: 0;
  cursor: pointer;
  appearance: none;
  text-decoration: none;
  font-family: inherit;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  height: var(--button-height);
  padding: var(--button-padding);
  background: var(--button-background);
  color: var(--button-color);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
}

[data-cl-button]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-cl-button]:focus {
  box-shadow: var(--button-focus-box-shadow);
}

[data-cl-button]:not(:disabled):active {
  opacity: var(--button-active-opacity);
}

@media (hover: hover) {
  [data-cl-button]:not(:disabled):hover {
    background-color: var(--button-hover-background-color);
    opacity: var(--button-hover-opacity);
  }
}

/* Variants */

[data-cl-button-variant="transparent"] {
  --button-background: transparent;
  --button-color: var(--color-foreground-text);
  --button-border: 1px solid transparent;

  --button-focus-box-shadow: var(--button-transparent-focus-box-shadow-color) 0
    0 0 4px;

  --button-active-opacity: 0.8;

  --button-hover-background-color: var(
    --button-transparent-hover-background-color
  );
  --button-hover-opacity: 0.9;
}

[data-cl-button-variant="neutral"] {
  --button-background: var(--button-neutral-background);
  --button-color: var(--color-foreground-text);
  --button-border: 1px solid var(--button-neutral-border-color);

  --button-focus-box-shadow: var(--button-neutral-focus-box-shadow-color) 0 0 0
    4px;

  --button-active-opacity: 0.7;

  --button-hover-background-color: var(--button-background);
  --button-hover-opacity: 0.8;
}

[data-cl-button-variant="danger"] {
  --button-background: var(--color-danger-600);
  --button-color: white;
  --button-border: 1px solid var(--color-danger-600);

  --button-focus-box-shadow: var(--color-danger-100) 0 0 0 4px;

  --button-active-opacity: 0.8;

  --button-hover-background-color: var(--button-background);
  --button-hover-opacity: 0.9;
}

/* Sizes */

[data-cl-button-size="sm"] {
  --button-height: 36px;
  --button-padding: 0 14px;
}

[data-cl-button-size="xs"] {
  --button-height: 30px;
  --button-padding: 0 14px;
  --button-font-size: var(--fs1);
}

[data-cl-button-size="xxs"] {
  --button-height: 26px;
  --button-padding: 0 11px;
  --button-border-radius: var(--br1);
  --button-font-size: var(--fs1);
}

/* button content */

[data-cl-button-content] {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--sp2);
}

[data-cl-button-content-icon-position="start"] {
  padding-inline-end: calc(var(--button-font-size) / 2);
}

[data-cl-button-content-icon-position="end"] {
  padding-inline-start: calc(var(--button-font-size) / 2);
}

[data-cl-button-content-gap="sm"] {
  gap: var(--sp1);
}

/* activity indicator */

[data-cl-button-activity-indicator] {
  height: 30px;
  width: 30px;
}

[data-cl-button-activity-indicator] > svg {
  animation-name: button_activity_indicator_animation_circular_progress;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

[data-cl-button-activity-indicator] > svg > circle {
  stroke: currentColor;
}

@keyframes button_activity_indicator_animation_circular_progress {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}