:host {
  /**
  * @prop --klevu-button-background-color var(--klevu-color-primary): Background color of button
  * @prop --klevu-button-text-color var(--klevu-color-neutral-1): Button text color
  * @prop --klevu-button-text-align center: Align text on button
  * @prop --klevu-button-padding calc(var(--klevu-size-m) - (var(--klevu-body-s-size) / 2)): Override buttom padding with custom value
  * @prop --klevu-button-font-size var(--klevu-body-s-size): Size of button text
  * @prop --klevu-button-cursor-hover auto: type of cursor on hover
  */
  --background-hover: var(--klevu-button-background-hover, var(--klevu-color-primary-darker));
  --background-color: var(--klevu-button-background-color, var(--klevu-color-primary));
  --text-align: var(--klevu-button-text-align);
  --padding: var(--klevu-button-padding, calc(var(--klevu-size-m) - (var(--klevu-body-s-size) / 2)));
  --font-size: var(--klevu-button-font-size, var(--klevu-body-s-size));
  --text-color: var(--klevu-button-text-color, var(--klevu-color-neutral-1));
  --icon-size: var(--klevu-button-icon-size, 1.5em);
  --icon-color: var(--klevu-button-icon-color, var(--text-color));
  --icon-rotation: var(--klevu-button-icon-rotation, 0deg);
  --border-radius: var(--klevu-button-border-radius, 10000000px);
  --cursor-hover: var(--klevu-button-cursor-hover, auto);
}

button {
  display: inline-block;
  position: relative;
  background: var(--background-color);
  border-radius: var(--klevu-border-radius-m);
  box-sizing: border-box;
  transition: transform 100ms;
  border: 0;
  height: calc(var(--klevu-size-m) * 2);
  font-size: var(--font-size);
  font-weight: var(--klevu-body-s-weight);
  padding: 0 calc(var(--padding) * 2);
  text-align: var(--text-align, center);
}

button klevu-typography {
  --klevu-typography-font-size: var(--font-size);
}

button.sizeSmall {
  --padding: var(--klevu-button-padding, calc(var(--klevu-size-s) - (var(--klevu-body-s-size) / 2)));
  height: calc(var(--klevu-size-s) * 2);
}

button.sizeLarge {
  --padding: var(--klevu-button-padding, calc(var(--klevu-size-l) - (var(--klevu-body-s-size) / 2)));
  height: calc(var(--klevu-size-l) * 2);
}

button.sizeTiny {
  --padding: var(--klevu-button-padding, var(--klevu-spacing-02));
  height: calc(var(--klevu-size-xs) * 2);
  --font-size: var(--klevu-body-xs-size);
  border-radius: var(--klevu-border-radius-s);
}

button klevu-typography {
  --klevu-typography-color: var(--text-color);
  color: var(--text-color);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

button klevu-icon {
  --klevu-typography-color: var(--text-color);
  color: var(--icon-color);
  transform: rotate(var(--icon-rotation));
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

button:hover {
  background-color: var(--background-hover);
  cursor: var(--cursor-hover);
}

button:focus {
  outline: 0;
}

button:focus:after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 2px solid var(--background-color);
  border-radius: calc(var(--klevu-border-radius-m) + 2px);
}

button:disabled {
  opacity: var(--klevu-opacity-disabled);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button.secondary {
  background: var(--klevu-color-neutral-2);
}

button.secondary klevu-typography,
button.secondary klevu-icon {
  --klevu-typography-color: var(--klevu-color-neutral-7);
  color: var(--klevu-color-neutral-8);
}

button.secondary:hover {
  background: var(--klevu-color-neutral-3);
  cursor: var(--cursor-hover);
}

button.fullwidth {
  display: block;
  width: 100%;
}

button.icon {
  padding: 0;
  height: calc(var(--klevu-size-m) * 2);
  width: calc(var(--klevu-size-m) * 2);
  border-radius: var(--border-radius);
  font-size: var(--icon-size);
  font-weight: normal;
  line-height: 1.8;
}

button.icon.sizeSmall,
button.icon.sizeTiny {
  height: calc(var(--klevu-size-s) * 2);
  width: calc(var(--klevu-size-s) * 2);
  line-height: 1.5;
}

button.icon.sizeLarge {
  height: calc(var(--klevu-size-l) * 2);
  width: calc(var(--klevu-size-l) * 2);
  line-height: 2;
}

button.icon klevu-icon {
  position: relative;
  top: -1px;
}

button.icon:focus:after {
  border-radius: 100%;
}

button.tertiary {
  background: transparent;
  border: 0;
  color: var(--klevu-color-primary);
  padding: 0;
  height: calc(var(--klevu-size-s) * 2);
}

button.tertiary klevu-typography,
button.tertiary klevu-icon {
  --klevu-typography-color: var(--klevu-color-primary);
  color: var(--klevu-color-primary);
}