@larva.io/webcomponents/dist/collection/components/internal/button/button.css

Fentrica SmartUnits WebComponents package

slot-fb[hidden], slot[hidden] {
  display: initial !important;
}

/**
* @prop --lar-button-border-radius: Button border radius
* @prop --lar-button-padding-top: Button padding top
* @prop --lar-button-padding-right: Button padding right
* @prop --lar-button-padding-bottom: Button padding bottom
* @prop --lar-button-padding-left: Button padding left
* @prop --lar-button-font-size: Button font size

* @prop --lar-button-border-radius-small: Button border radius
* @prop --lar-button-padding-top-small: Button padding top
* @prop --lar-button-padding-right-small: Button padding right
* @prop --lar-button-padding-bottom-small: Button padding bottom
* @prop --lar-button-padding-left-small: Button padding left
* @prop --lar-button-font-size-small: Button font size


  */
:host {
  display: inline-block;
  border-radius: var(--lar-button-border-radius, 0.6rem);
  overflow: hidden;
}

:host(.lar-button-full) {
  display: block;
  width: 100%;
}

button {
  padding: var(--lar-button-padding-top, 1rem) var(--lar-button-padding-right, 1rem) var(--lar-button-padding-bottom, 1rem) var(--lar-button-padding-left, 1rem);
  font-size: var(--lar-button-font-size, 1.2rem);
  display: block;
  width: 100%;
  height: 100%;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden !important;
  border: 0;
  cursor: pointer;
  position: relative;
}

:host(.lar-button-small) button {
  padding: var(--lar-button-padding-top-small, 0.6rem) var(--lar-button-padding-right-small, 0.6rem) var(--lar-button-padding-bottom-small, 0.6rem) var(--lar-button-padding-left-small, 0.6rem);
  font-size: var(--lar-button-font-size-small, 1rem);
}

:host(.lar-button-small) {
  border-radius: var(--lar-button-border-radius-small, 0.6rem);
}

button:focus {
  outline: none;
}

:host(.lar-button-disabled) {
  pointer-events: none;
  opacity: 0.3;
  filter: grayscale(0.4);
}

:host(.lar-button-outline) {
  background: transparent;
  border: 2px solid;
}

:host(.lar-color-primary) button {
  background: var(--lar-color-primary, #780bb7) !important;
  color: var(--lar-color-primary-contrast, #fff) !important;
  fill: var(--lar-color-primary-contrast, #fff) !important;
  stroke: var(--lar-color-primary-contrast, #fff) !important;
}

:host(.lar-color-primary) button:hover {
  background: var(--lar-color-primary-tint, rgb(133.5, 35.4, 190.2)) !important;
}

:host(.lar-color-primary) button:active {
  background: var(--lar-color-primary-shade, rgb(105.6, 9.68, 161.04)) !important;
  color: var(--lar-color-primary-contrast, #fff) !important;
}

:host(.lar-color-primary.lar-button-outline) button {
  background: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  stroke: inherit !important;
}

:host(.lar-color-primary.lar-button-outline) {
  background: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.05) !important;
  border-color: var(--lar-color-primary, #780bb7) !important;
  color: var(--lar-color-primary, #780bb7) !important;
  fill: var(--lar-color-primary, #780bb7) !important;
  stroke: var(--lar-color-primary, #780bb7) !important;
}

:host(.lar-color-primary.lar-button-outline) button:hover {
  background: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.12) !important;
}

:host(.lar-color-primary.lar-button-outline) button:active {
  background: rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.2) !important;
  color: var(--lar-color-primary, #780bb7) !important;
  fill: var(--lar-color-primary, #780bb7) !important;
  stroke: var(--lar-color-primary, #780bb7) !important;
}

:host(.lar-color-secondary) button {
  background: var(--lar-color-secondary, #7fb800) !important;
  color: var(--lar-color-secondary-contrast, #fff) !important;
  fill: var(--lar-color-secondary-contrast, #fff) !important;
  stroke: var(--lar-color-secondary-contrast, #fff) !important;
}

:host(.lar-color-secondary) button:hover {
  background: var(--lar-color-secondary-tint, rgb(139.8, 191.1, 25.5)) !important;
}

:host(.lar-color-secondary) button:active {
  background: var(--lar-color-secondary-shade, rgb(111.76, 161.92, 0)) !important;
  color: var(--lar-color-secondary-contrast, #fff) !important;
}

:host(.lar-color-secondary.lar-button-outline) button {
  background: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  stroke: inherit !important;
}

:host(.lar-color-secondary.lar-button-outline) {
  background: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.05) !important;
  border-color: var(--lar-color-secondary, #7fb800) !important;
  color: var(--lar-color-secondary, #7fb800) !important;
  fill: var(--lar-color-secondary, #7fb800) !important;
  stroke: var(--lar-color-secondary, #7fb800) !important;
}

:host(.lar-color-secondary.lar-button-outline) button:hover {
  background: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.12) !important;
}

:host(.lar-color-secondary.lar-button-outline) button:active {
  background: rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.2) !important;
  color: var(--lar-color-secondary, #7fb800) !important;
  fill: var(--lar-color-secondary, #7fb800) !important;
  stroke: var(--lar-color-secondary, #7fb800) !important;
}

:host(.lar-color-tertiary) button {
  background: var(--lar-color-tertiary, #00a6ed) !important;
  color: var(--lar-color-tertiary-contrast, #fff) !important;
  fill: var(--lar-color-tertiary-contrast, #fff) !important;
  stroke: var(--lar-color-tertiary-contrast, #fff) !important;
}

:host(.lar-color-tertiary) button:hover {
  background: var(--lar-color-tertiary-tint, rgb(25.5, 174.9, 238.8)) !important;
}

:host(.lar-color-tertiary) button:active {
  background: var(--lar-color-tertiary-shade, rgb(0, 146.08, 208.56)) !important;
  color: var(--lar-color-tertiary-contrast, #fff) !important;
}

:host(.lar-color-tertiary.lar-button-outline) button {
  background: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  stroke: inherit !important;
}

:host(.lar-color-tertiary.lar-button-outline) {
  background: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.05) !important;
  border-color: var(--lar-color-tertiary, #00a6ed) !important;
  color: var(--lar-color-tertiary, #00a6ed) !important;
  fill: var(--lar-color-tertiary, #00a6ed) !important;
  stroke: var(--lar-color-tertiary, #00a6ed) !important;
}

:host(.lar-color-tertiary.lar-button-outline) button:hover {
  background: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.12) !important;
}

:host(.lar-color-tertiary.lar-button-outline) button:active {
  background: rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.2) !important;
  color: var(--lar-color-tertiary, #00a6ed) !important;
  fill: var(--lar-color-tertiary, #00a6ed) !important;
  stroke: var(--lar-color-tertiary, #00a6ed) !important;
}

:host(.lar-color-success) button {
  background: var(--lar-color-success, #7fb800) !important;
  color: var(--lar-color-success-contrast, #fff) !important;
  fill: var(--lar-color-success-contrast, #fff) !important;
  stroke: var(--lar-color-success-contrast, #fff) !important;
}

:host(.lar-color-success) button:hover {
  background: var(--lar-color-success-tint, rgb(139.8, 191.1, 25.5)) !important;
}

:host(.lar-color-success) button:active {
  background: var(--lar-color-success-shade, rgb(111.76, 161.92, 0)) !important;
  color: var(--lar-color-success-contrast, #fff) !important;
}

:host(.lar-color-success.lar-button-outline) button {
  background: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  stroke: inherit !important;
}

:host(.lar-color-success.lar-button-outline) {
  background: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.05) !important;
  border-color: var(--lar-color-success, #7fb800) !important;
  color: var(--lar-color-success, #7fb800) !important;
  fill: var(--lar-color-success, #7fb800) !important;
  stroke: var(--lar-color-success, #7fb800) !important;
}

:host(.lar-color-success.lar-button-outline) button:hover {
  background: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.12) !important;
}

:host(.lar-color-success.lar-button-outline) button:active {
  background: rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.2) !important;
  color: var(--lar-color-success, #7fb800) !important;
  fill: var(--lar-color-success, #7fb800) !important;
  stroke: var(--lar-color-success, #7fb800) !important;
}

:host(.lar-color-warning) button {
  background: var(--lar-color-warning, #ffb400) !important;
  color: var(--lar-color-warning-contrast, #fff) !important;
  fill: var(--lar-color-warning-contrast, #fff) !important;
  stroke: var(--lar-color-warning-contrast, #fff) !important;
}

:host(.lar-color-warning) button:hover {
  background: var(--lar-color-warning-tint, rgb(255, 187.5, 25.5)) !important;
}

:host(.lar-color-warning) button:active {
  background: var(--lar-color-warning-shade, rgb(224.4, 158.4, 0)) !important;
  color: var(--lar-color-warning-contrast, #fff) !important;
}

:host(.lar-color-warning.lar-button-outline) button {
  background: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  stroke: inherit !important;
}

:host(.lar-color-warning.lar-button-outline) {
  background: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.05) !important;
  border-color: var(--lar-color-warning, #ffb400) !important;
  color: var(--lar-color-warning, #ffb400) !important;
  fill: var(--lar-color-warning, #ffb400) !important;
  stroke: var(--lar-color-warning, #ffb400) !important;
}

:host(.lar-color-warning.lar-button-outline) button:hover {
  background: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.12) !important;
}

:host(.lar-color-warning.lar-button-outline) button:active {
  background: rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.2) !important;
  color: var(--lar-color-warning, #ffb400) !important;
  fill: var(--lar-color-warning, #ffb400) !important;
  stroke: var(--lar-color-warning, #ffb400) !important;
}

:host(.lar-color-danger) button {
  background: var(--lar-color-danger, #f6511d) !important;
  color: var(--lar-color-danger-contrast, #fff) !important;
  fill: var(--lar-color-danger-contrast, #fff) !important;
  stroke: var(--lar-color-danger-contrast, #fff) !important;
}

:host(.lar-color-danger) button:hover {
  background: var(--lar-color-danger-tint, rgb(246.9, 98.4, 51.6)) !important;
}

:host(.lar-color-danger) button:active {
  background: var(--lar-color-danger-shade, rgb(216.48, 71.28, 25.52)) !important;
  color: var(--lar-color-danger-contrast, #fff) !important;
}

:host(.lar-color-danger.lar-button-outline) button {
  background: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  stroke: inherit !important;
}

:host(.lar-color-danger.lar-button-outline) {
  background: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.05) !important;
  border-color: var(--lar-color-danger, #f6511d) !important;
  color: var(--lar-color-danger, #f6511d) !important;
  fill: var(--lar-color-danger, #f6511d) !important;
  stroke: var(--lar-color-danger, #f6511d) !important;
}

:host(.lar-color-danger.lar-button-outline) button:hover {
  background: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.12) !important;
}

:host(.lar-color-danger.lar-button-outline) button:active {
  background: rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.2) !important;
  color: var(--lar-color-danger, #f6511d) !important;
  fill: var(--lar-color-danger, #f6511d) !important;
  stroke: var(--lar-color-danger, #f6511d) !important;
}

:host(.lar-color-light) button {
  background: var(--lar-color-light, #f4f5f8) !important;
  color: var(--lar-color-light-contrast, #000) !important;
  fill: var(--lar-color-light-contrast, #000) !important;
  stroke: var(--lar-color-light-contrast, #000) !important;
}

:host(.lar-color-light) button:hover {
  background: var(--lar-color-light-tint, rgb(245.1, 246, 248.7)) !important;
}

:host(.lar-color-light) button:active {
  background: var(--lar-color-light-shade, rgb(214.72, 215.6, 218.24)) !important;
  color: var(--lar-color-light-contrast, #000) !important;
}

:host(.lar-color-light.lar-button-outline) button {
  background: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  stroke: inherit !important;
}

:host(.lar-color-light.lar-button-outline) {
  background: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.05) !important;
  border-color: var(--lar-color-light, #f4f5f8) !important;
  color: var(--lar-color-light, #f4f5f8) !important;
  fill: var(--lar-color-light, #f4f5f8) !important;
  stroke: var(--lar-color-light, #f4f5f8) !important;
}

:host(.lar-color-light.lar-button-outline) button:hover {
  background: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.12) !important;
}

:host(.lar-color-light.lar-button-outline) button:active {
  background: rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.2) !important;
  color: var(--lar-color-light, #f4f5f8) !important;
  fill: var(--lar-color-light, #f4f5f8) !important;
  stroke: var(--lar-color-light, #f4f5f8) !important;
}

:host(.lar-color-medium) button {
  background: var(--lar-color-medium, #d6d6d6) !important;
  color: var(--lar-color-medium-contrast, #000) !important;
  fill: var(--lar-color-medium-contrast, #000) !important;
  stroke: var(--lar-color-medium-contrast, #000) !important;
}

:host(.lar-color-medium) button:hover {
  background: var(--lar-color-medium-tint, rgb(218.1, 218.1, 218.1)) !important;
}

:host(.lar-color-medium) button:active {
  background: var(--lar-color-medium-shade, rgb(188.32, 188.32, 188.32)) !important;
  color: var(--lar-color-medium-contrast, #000) !important;
}

:host(.lar-color-medium.lar-button-outline) button {
  background: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  stroke: inherit !important;
}

:host(.lar-color-medium.lar-button-outline) {
  background: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.05) !important;
  border-color: var(--lar-color-medium, #d6d6d6) !important;
  color: var(--lar-color-medium, #d6d6d6) !important;
  fill: var(--lar-color-medium, #d6d6d6) !important;
  stroke: var(--lar-color-medium, #d6d6d6) !important;
}

:host(.lar-color-medium.lar-button-outline) button:hover {
  background: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.12) !important;
}

:host(.lar-color-medium.lar-button-outline) button:active {
  background: rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.2) !important;
  color: var(--lar-color-medium, #d6d6d6) !important;
  fill: var(--lar-color-medium, #d6d6d6) !important;
  stroke: var(--lar-color-medium, #d6d6d6) !important;
}

:host(.lar-color-dark) button {
  background: var(--lar-color-dark, #222428) !important;
  color: var(--lar-color-dark-contrast, #fff) !important;
  fill: var(--lar-color-dark-contrast, #fff) !important;
  stroke: var(--lar-color-dark-contrast, #fff) !important;
}

:host(.lar-color-dark) button:hover {
  background: var(--lar-color-dark-tint, rgb(56.1, 57.9, 61.5)) !important;
}

:host(.lar-color-dark) button:active {
  background: var(--lar-color-dark-shade, rgb(29.92, 31.68, 35.2)) !important;
  color: var(--lar-color-dark-contrast, #fff) !important;
}

:host(.lar-color-dark.lar-button-outline) button {
  background: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  stroke: inherit !important;
}

:host(.lar-color-dark.lar-button-outline) {
  background: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.05) !important;
  border-color: var(--lar-color-dark, #222428) !important;
  color: var(--lar-color-dark, #222428) !important;
  fill: var(--lar-color-dark, #222428) !important;
  stroke: var(--lar-color-dark, #222428) !important;
}

:host(.lar-color-dark.lar-button-outline) button:hover {
  background: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.12) !important;
}

:host(.lar-color-dark.lar-button-outline) button:active {
  background: rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.2) !important;
  color: var(--lar-color-dark, #222428) !important;
  fill: var(--lar-color-dark, #222428) !important;
  stroke: var(--lar-color-dark, #222428) !important;
}