/* PRIMARY */
/* default (bus) */
/* SECONDARY */
/* default (bus) */
/* SUPPLEMENTARY */
/* CLEAR */
/* UTILITY */
/* success */
/* danger */
/* THEMES */
/* coat */
/* black */
.hds-button {
  --border-width: 2px;
  --outline-width-focus: 3px;
  --padding-horizontal: var(--spacing-l);
  --min-size: 56px;
  --padding-vertical: var(--spacing-s);
  --padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
  --icon-reposition: calc(-1 * var(--spacing-2-xs));
  /* logics, always falls back to previous (upper) if not given ->
  (no) active color -> (no) hover color -> (no) focus color -> default color
  */
  --computed-background-color: var(--background-color, transparent);
  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));
  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));
  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));
  --computed-background-color-disabled: var(--background-color-disabled, var(--color-black-20, transparent));
  --computed-color: var(--color, inherit);
  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));
  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));
  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));
  --computed-color-disabled: var(--color-disabled, var(--color-white, inherit));
  --computed-border-color: var(--border-color, var(--computed-background-color));
  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));
  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));
  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));
  --computed-border-color-disabled: var(--border-color-disabled, var(--computed-background-color-disabled, transparent));
  --computed-outline-color-focus: var(--outline-color-focus, transparent);
  --computed-icon-size: var(--icon-size, var(--spacing-m));
  align-items: center;
  background-color: var(--computed-background-color);
  border: var(--border-width) solid var(--computed-border-color);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--computed-color, inherit);
  column-gap: var(--spacing-2-xs);
  cursor: var(--cursor, pointer);
  display: inline-flex;
  font-family: inherit;
  font-size: 100%;
  font-weight: 500;
  -webkit-hyphens: auto;
          hyphens: auto;
  place-content: flex-start center;
  line-height: var(--lineheight-l);
  margin: 0;
  min-height: var(--min-size);
  min-width: var(--min-size);
  outline: none;
  outline-offset: 2px;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding: var(--padding);
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  vertical-align: top;
  /* repositioning the icons, after & before usage */
}
.hds-button:after {
  margin-right: var(--icon-reposition);
}
.hds-button:before {
  margin-left: var(--icon-reposition);
}
.hds-button, .hds-button[type=button], .hds-button[type=reset], .hds-button[type=submit] {
  -webkit-appearance: button;
}
.hds-button:focus-visible { /* focus */
  background-color: var(--computed-background-color-focus);
  border-color: var(--computed-border-color-focus);
  color: var(--computed-color-focus);
  outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);
}
.hds-button:hover { /* hover */
  background-color: var(--computed-background-color-hover);
  border-color: var(--computed-border-color-hover);
  color: var(--computed-color-hover);
}
.hds-button:active { /* active */
  background-color: var(--computed-background-color-active);
  border-color: var(--computed-border-color-active);
  color: var(--computed-color-active);
  outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);
}
.hds-button:disabled { /* disabled */
  --cursor: not-allowed;
  background-color: var(--computed-background-color-disabled);
  border-color: var(--computed-border-color-disabled);
  color: var(--computed-color-disabled);
  outline: none;
}
button.button {
  -webkit-appearance: button;
}
.hds-button .hds-icon {
  flex-shrink: 0;
  height: var(--computed-icon-size);
  width: var(--computed-icon-size);
  /* start-side icon */
}
.hds-button .hds-icon:first-child:not(:last-child) {
  margin-left: var(--icon-reposition);
}
.hds-button .hds-icon:last-child:not(:first-child) { /* end-side icon */
  margin-right: var(--icon-reposition);
}
.hds-button--small {
  --min-size: 44px;
  --padding-horizontal: var(--spacing-m);
  --padding-vertical: var(--spacing-2-xs);
}
.hds-button--fullwidth {
  width: 100%;
}
.hds-button--primary {
  --background-color: var(--color-bus);
  --background-color-hover: var(--color-bus-dark);
  --background-color-focus: var(--color-bus);
  --background-color-disabled: var(--color-black-20);
  --border-color: transparent;
  --color: var(--color-white);
  --color-disabled: var(--color-white);
  --outline-color-focus: var(--color-coat-of-arms);
}
.hds-button--secondary {
  --background-color: transparent;
  --background-color-hover: var(--color-bus-light);
  --background-color-focus: transparent;
  --background-color-disabled: transparent;
  --border-color: var(--color-bus);
  --border-color-disabled: var(--color-disabled);
  --color: var(--color-bus);
  --color-disabled: var(--color-black-40);
  --outline-color-focus: var(--color-coat-of-arms);
}
.hds-button--supplementary {
  --background-color: transparent;
  --background-color-hover: var(--color-bus-light);
  --background-color-focus: transparent;
  --background-color-disabled: transparent;
  --border-color: transparent;
  --border-color-disabled: transparent;
  --color: var(--color-bus);
  --color-disabled: var(--color-black-40);
  --outline-color-focus: var(--color-coat-of-arms);
}
.hds-button--clear {
  --background-color: transparent;
  --background-color-disabled: transparent;
  --border-color: transparent;
  --border-color-disabled: transparent;
  --color: var(--color-black-90);
  --color-disabled: var(--color-black-90);
}
.hds-button--success {
  --background-color: var(--color-success);
  --background-color-hover: var(--color-success-dark);
  --background-color-focus: var(--color-success);
  --border-color: var(--color-success);
  --border-color-hover: var(--color-success-dark);
  --border-color-focus: var(--color-success);
  --color: var(--color-white);
  --outline-color-focus: var(--color-coat-of-arms);
}
.hds-button--danger {
  --background-color: var(--color-error);
  --background-color-hover: var(--color-error-dark);
  --background-color-focus: var(--color-error);
  --border-color: var(--color-error);
  --border-color-hover: var(--color-error-dark);
  --border-color-focus: var(--color-error);
  --color: var(--color-white);
  --outline-color-focus: var(--color-coat-of-arms);
}
.hds-button--primary.hds-button--theme-coat {
  --background-color: var(--color-coat-of-arms);
  --background-color-hover: var(--color-coat-of-arms-dark);
  --background-color-focus: var(--color-coat-of-arms);
  --border-color: var(--color-coat-of-arms);
  --border-color-hover: var(--color-coat-of-arms-dark);
  --border-color-focus: var(--color-coat-of-arms);
  --color: var(--color-white);
}
.hds-button--secondary.hds-button--theme-coat {
  --background-color: transparent;
  --background-color-hover: var(--color-coat-of-arms-light);
  --background-color-focus: transparent;
  --border-color: var(--color-coat-of-arms);
  --color: var(--color-coat-of-arms);
}
.hds-button--supplementary.hds-button--theme-coat {
  --background-color: transparent;
  --background-color-hover: var(--color-coat-of-arms-light);
  --background-color-focus: transparent;
  --border-color: transparent;
  --color: var(--color-coat-of-arms);
}
.hds-button--primary.hds-button--theme-black {
  --background-color: var(--color-black);
  --background-color-hover: var(--color-black);
  --background-color-focus: var(--color-black);
  --border-color: var(--color-black);
  --border-color-hover: var(--color-black);
  --border-color-focus: var(--color-black);
  --color: var(--color-white);
  --color-hover: var(--color-white);
  --color-focus: var(--color-white);
}
.hds-button--secondary.hds-button--theme-black {
  --background-color: transparent;
  --background-color-hover: var(--color-black-5);
  --background-color-focus: transparent;
  --border-color: var(--color-black);
  --border-color-hover: var(--color-black);
  --border-color-focus: var(--color-black);
  --color: var(--color-black);
  --color-hover: var(--color-black);
  --color-focus: var(--color-black);
}
.hds-button--supplementary.hds-button--theme-black {
  --background-color: transparent;
  --background-color-hover: var(--color-black-5);
  --background-color-focus: transparent;
  --border-color: transparent;
  --border-color-hover: transparent;
  --color: var(--color-black);
  --color-hover: var(--color-black);
  --color-focus: var(--color-black);
}