/*
  Font family is Nunito Sans. Its fallback is Helvetica
*/
/*
  Font sizes have been converted to rem considering a base size of 16px.
*/
/*
*  Z-Index
*  
*  The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. 
*  Overlapping elements with a larger z-index cover those with a smaller one.
*  
*  REF: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
*  REF: https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/  
*/
/**
 * Define media query values
 */
:host {
  height: fit-content;
  position: relative;
  width: fit-content;
}

:host(.block) {
  width: 100%;
  display: flex;
}

:host(.group) {
  width: auto;
}

:host:focus-visible {
  outline: none;
}

.button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  outline: none;
  background: transparent;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
  /* Remove excess padding and border in Firefox 4+ */
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 8px;
  border-style: solid;
  border-left-width: 1px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  position: relative;
  box-sizing: border-box;
  gap: 4px;
  padding: 0 16px;
}
.button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.button__size--short {
  height: 32px;
}
.button__size--standard {
  height: 40px;
}
.button__size--medium {
  height: 40px;
}
.button__size--large {
  height: 56px;
}
.button__only-icon--medium {
  padding: 8px;
  gap: 0;
}
.button__only-icon--large {
  padding: 8px 16px;
  gap: 0;
}
.button__only-icon--short {
  padding: 0px;
  width: 32px;
  gap: 0;
}
.button--block, .button--group {
  width: 100%;
}
.button--full-width {
  width: 100%;
}
.button__justify-content--center {
  justify-content: center;
}
.button__justify-content--space-between {
  justify-content: space-between;
}
.button__group-content {
  display: flex;
  align-items: center;
  gap: 4px;
}
.button bds-loading-spinner {
  max-height: 100%;
  position: absolute;
}
.button * {
  pointer-events: none;
}
.button__color--primary.button__variant--solid, .button__color--primary.button__variant--primary {
  background-color: var(--color-surface-primary, #1e6bf1);
  border-color: transparent;
}
.button__color--primary.button__variant--solid .typo_buttom,
.button__color--primary.button__variant--solid .icon_buttom, .button__color--primary.button__variant--primary .typo_buttom,
.button__color--primary.button__variant--primary .icon_buttom {
  color: var(--color-content-bright, white);
  z-index: 1;
}
.button__color--primary.button__variant--solid--disabled, .button__color--primary.button__variant--primary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--primary.button__variant--solid:hover::before, .button__color--primary.button__variant--primary:hover::before {
  background-color: var(--color-surface-primary, #1e6bf1);
  transition: background-color 0.3s ease;
  filter: brightness(0.88);
}
.button__color--primary.button__variant--solid:active::before, .button__color--primary.button__variant--solid--active::before, .button__color--primary.button__variant--primary:active::before, .button__color--primary.button__variant--primary--active::before {
  filter: brightness(0.76);
}
.button__color--primary.button__variant--outline, .button__color--primary.button__variant--tertiary {
  background-color: transparent;
  border-color: var(--color-primary, #1e6bf1);
}
.button__color--primary.button__variant--outline .typo_buttom,
.button__color--primary.button__variant--outline .icon_buttom, .button__color--primary.button__variant--tertiary .typo_buttom,
.button__color--primary.button__variant--tertiary .icon_buttom {
  color: var(--color-primary, #1e6bf1);
  z-index: 1;
}
.button__color--primary.button__variant--outline--disabled, .button__color--primary.button__variant--tertiary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--primary.button__variant--outline:hover::before, .button__color--primary.button__variant--tertiary:hover::before {
  background-color: var(--color-surface-primary, #1e6bf1);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button__color--primary.button__variant--outline:active::before, .button__color--primary.button__variant--outline--active::before, .button__color--primary.button__variant--tertiary:active::before, .button__color--primary.button__variant--tertiary--active::before {
  opacity: 0.24;
}
.button__color--primary.button__variant--text, .button__color--primary.button__variant--secondary {
  background-color: transparent;
  border-color: transparent;
}
.button__color--primary.button__variant--text .typo_buttom,
.button__color--primary.button__variant--text .icon_buttom, .button__color--primary.button__variant--secondary .typo_buttom,
.button__color--primary.button__variant--secondary .icon_buttom {
  color: var(--color-primary, #1e6bf1);
  z-index: 1;
}
.button__color--primary.button__variant--text--disabled, .button__color--primary.button__variant--secondary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--primary.button__variant--text:hover::before, .button__color--primary.button__variant--secondary:hover::before {
  background-color: var(--color-primary, #1e6bf1);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button__color--primary.button__variant--text:active::before, .button__color--primary.button__variant--text--active::before, .button__color--primary.button__variant--secondary:active::before, .button__color--primary.button__variant--secondary--active::before {
  opacity: 0.24;
}
.button__color--content.button__variant--solid, .button__color--content.button__variant--primary {
  background-color: var(--color-content-default, #282828);
  border-color: transparent;
}
.button__color--content.button__variant--solid .typo_buttom,
.button__color--content.button__variant--solid .icon_buttom, .button__color--content.button__variant--primary .typo_buttom,
.button__color--content.button__variant--primary .icon_buttom {
  color: var(--color-surface-0, white);
  z-index: 1;
}
.button__color--content.button__variant--solid--disabled, .button__color--content.button__variant--primary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--content.button__variant--solid:hover::before, .button__color--content.button__variant--primary:hover::before {
  background-color: var(--color-content-default, #282828);
  transition: background-color 0.3s ease;
  filter: brightness(0.88);
}
.button__color--content.button__variant--solid:active::before, .button__color--content.button__variant--solid--active::before, .button__color--content.button__variant--primary:active::before, .button__color--content.button__variant--primary--active::before {
  filter: brightness(0.76);
}
.button__color--content.button__variant--outline, .button__color--content.button__variant--tertiary {
  background-color: transparent;
  border-color: var(--color-content-default, #282828);
}
.button__color--content.button__variant--outline .typo_buttom,
.button__color--content.button__variant--outline .icon_buttom, .button__color--content.button__variant--tertiary .typo_buttom,
.button__color--content.button__variant--tertiary .icon_buttom {
  color: var(--color-content-default, #282828);
  z-index: 1;
}
.button__color--content.button__variant--outline--disabled, .button__color--content.button__variant--tertiary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--content.button__variant--outline:hover::before, .button__color--content.button__variant--tertiary:hover::before {
  background-color: var(--color-content-default, #282828);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button__color--content.button__variant--outline:active::before, .button__color--content.button__variant--outline--active::before, .button__color--content.button__variant--tertiary:active::before, .button__color--content.button__variant--tertiary--active::before {
  opacity: 0.24;
}
.button__color--content.button__variant--text, .button__color--content.button__variant--secondary {
  background-color: transparent;
  border-color: transparent;
}
.button__color--content.button__variant--text .typo_buttom,
.button__color--content.button__variant--text .icon_buttom, .button__color--content.button__variant--secondary .typo_buttom,
.button__color--content.button__variant--secondary .icon_buttom {
  color: var(--color-content-default, #282828);
  z-index: 1;
}
.button__color--content.button__variant--text--disabled, .button__color--content.button__variant--secondary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--content.button__variant--text:hover::before, .button__color--content.button__variant--secondary:hover::before {
  background-color: var(--color-content-default, #282828);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button__color--content.button__variant--text:active::before, .button__color--content.button__variant--text--active::before, .button__color--content.button__variant--secondary:active::before, .button__color--content.button__variant--secondary--active::before {
  opacity: 0.24;
}
.button__color--negative.button__variant--solid, .button__color--negative.button__variant--primary, .button__color--negative.button__variant--delete {
  background-color: var(--color-surface-negative, #8a0000);
  border-color: transparent;
}
.button__color--negative.button__variant--solid .typo_buttom,
.button__color--negative.button__variant--solid .icon_buttom, .button__color--negative.button__variant--primary .typo_buttom,
.button__color--negative.button__variant--primary .icon_buttom, .button__color--negative.button__variant--delete .typo_buttom,
.button__color--negative.button__variant--delete .icon_buttom {
  color: var(--color-content-bright, white);
  z-index: 1;
}
.button__color--negative.button__variant--solid--disabled, .button__color--negative.button__variant--primary--disabled, .button__color--negative.button__variant--delete--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--negative.button__variant--solid:hover::before, .button__color--negative.button__variant--primary:hover::before, .button__color--negative.button__variant--delete:hover::before {
  background-color: var(--color-surface-negative, #8a0000);
  transition: background-color 0.3s ease;
  filter: brightness(0.88);
}
.button__color--negative.button__variant--solid:active::before, .button__color--negative.button__variant--solid--active::before, .button__color--negative.button__variant--primary:active::before, .button__color--negative.button__variant--primary--active::before, .button__color--negative.button__variant--delete:active::before, .button__color--negative.button__variant--delete--active::before {
  filter: brightness(0.76);
}
.button__color--negative.button__variant--outline, .button__color--negative.button__variant--tertiary, .button__color--negative.button__variant--delete {
  background-color: transparent;
  border-color: var(--color-negative, #e60f0f);
}
.button__color--negative.button__variant--outline .typo_buttom,
.button__color--negative.button__variant--outline .icon_buttom, .button__color--negative.button__variant--tertiary .typo_buttom,
.button__color--negative.button__variant--tertiary .icon_buttom, .button__color--negative.button__variant--delete .typo_buttom,
.button__color--negative.button__variant--delete .icon_buttom {
  color: var(--color-negative, #e60f0f);
  z-index: 1;
}
.button__color--negative.button__variant--outline--disabled, .button__color--negative.button__variant--tertiary--disabled, .button__color--negative.button__variant--delete--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--negative.button__variant--outline:hover::before, .button__color--negative.button__variant--tertiary:hover::before, .button__color--negative.button__variant--delete:hover::before {
  background-color: var(--color-surface-negative, #8a0000);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button__color--negative.button__variant--outline:active::before, .button__color--negative.button__variant--outline--active::before, .button__color--negative.button__variant--tertiary:active::before, .button__color--negative.button__variant--tertiary--active::before, .button__color--negative.button__variant--delete:active::before, .button__color--negative.button__variant--delete--active::before {
  opacity: 0.24;
}
.button__color--negative.button__variant--text, .button__color--negative.button__variant--secondary, .button__color--negative.button__variant--delete {
  background-color: transparent;
  border-color: transparent;
}
.button__color--negative.button__variant--text .typo_buttom,
.button__color--negative.button__variant--text .icon_buttom, .button__color--negative.button__variant--secondary .typo_buttom,
.button__color--negative.button__variant--secondary .icon_buttom, .button__color--negative.button__variant--delete .typo_buttom,
.button__color--negative.button__variant--delete .icon_buttom {
  color: var(--color-negative, #e60f0f);
  z-index: 1;
}
.button__color--negative.button__variant--text--disabled, .button__color--negative.button__variant--secondary--disabled, .button__color--negative.button__variant--delete--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--negative.button__variant--text:hover::before, .button__color--negative.button__variant--secondary:hover::before, .button__color--negative.button__variant--delete:hover::before {
  background-color: var(--color-negative, #e60f0f);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button__color--negative.button__variant--text:active::before, .button__color--negative.button__variant--text--active::before, .button__color--negative.button__variant--secondary:active::before, .button__color--negative.button__variant--secondary--active::before, .button__color--negative.button__variant--delete:active::before, .button__color--negative.button__variant--delete--active::before {
  opacity: 0.24;
}
.button__color--positive.button__variant--solid, .button__color--positive.button__variant--primary {
  background-color: var(--color-surface-positive, #01723e);
  border-color: transparent;
}
.button__color--positive.button__variant--solid .typo_buttom,
.button__color--positive.button__variant--solid .icon_buttom, .button__color--positive.button__variant--primary .typo_buttom,
.button__color--positive.button__variant--primary .icon_buttom {
  color: var(--color-content-bright, white);
  z-index: 1;
}
.button__color--positive.button__variant--solid--disabled, .button__color--positive.button__variant--primary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--positive.button__variant--solid:hover::before, .button__color--positive.button__variant--primary:hover::before {
  background-color: var(--color-surface-positive, #01723e);
  transition: background-color 0.3s ease;
  filter: brightness(0.88);
}
.button__color--positive.button__variant--solid:active::before, .button__color--positive.button__variant--solid--active::before, .button__color--positive.button__variant--primary:active::before, .button__color--positive.button__variant--primary--active::before {
  filter: brightness(0.76);
}
.button__color--positive.button__variant--outline, .button__color--positive.button__variant--tertiary {
  background-color: transparent;
  border-color: var(--color-positive, #10603b);
}
.button__color--positive.button__variant--outline .typo_buttom,
.button__color--positive.button__variant--outline .icon_buttom, .button__color--positive.button__variant--tertiary .typo_buttom,
.button__color--positive.button__variant--tertiary .icon_buttom {
  color: var(--color-positive, #10603b);
  z-index: 1;
}
.button__color--positive.button__variant--outline--disabled, .button__color--positive.button__variant--tertiary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--positive.button__variant--outline:hover::before, .button__color--positive.button__variant--tertiary:hover::before {
  background-color: var(--color-surface-positive, #01723e);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button__color--positive.button__variant--outline:active::before, .button__color--positive.button__variant--outline--active::before, .button__color--positive.button__variant--tertiary:active::before, .button__color--positive.button__variant--tertiary--active::before {
  opacity: 0.24;
}
.button__color--positive.button__variant--text, .button__color--positive.button__variant--secondary {
  background-color: transparent;
  border-color: transparent;
}
.button__color--positive.button__variant--text .typo_buttom,
.button__color--positive.button__variant--text .icon_buttom, .button__color--positive.button__variant--secondary .typo_buttom,
.button__color--positive.button__variant--secondary .icon_buttom {
  color: var(--color-positive, #10603b);
  z-index: 1;
}
.button__color--positive.button__variant--text--disabled, .button__color--positive.button__variant--secondary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button__color--positive.button__variant--text:hover::before, .button__color--positive.button__variant--secondary:hover::before {
  background-color: var(--color-positive, #10603b);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button__color--positive.button__variant--text:active::before, .button__color--positive.button__variant--text--active::before, .button__color--positive.button__variant--secondary:active::before, .button__color--positive.button__variant--secondary--active::before {
  opacity: 0.24;
}
.button.button__variant--secondary {
  background-color: transparent;
  border-color: transparent;
}
.button.button__variant--secondary .typo_buttom,
.button.button__variant--secondary .icon_buttom {
  color: var(--color-content-default, #282828);
  z-index: 1;
}
.button.button__variant--secondary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button.button__variant--secondary:hover::before {
  background-color: var(--color-content-default, #282828);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button.button__variant--secondary:active::before, .button.button__variant--secondary--active::before {
  opacity: 0.24;
}
.button.button__variant--tertiary {
  background-color: transparent;
  border-color: var(--color-content-default, #282828);
}
.button.button__variant--tertiary .typo_buttom,
.button.button__variant--tertiary .icon_buttom {
  color: var(--color-content-default, #282828);
  z-index: 1;
}
.button.button__variant--tertiary--disabled {
  opacity: 50%;
  pointer-events: none;
}
.button.button__variant--tertiary:hover::before {
  background-color: var(--color-content-default, #282828);
  transition: background-color 0.3s ease;
  opacity: 0.08;
}
.button.button__variant--tertiary:active::before, .button.button__variant--tertiary--active::before {
  opacity: 0.24;
}
.button__group {
  width: 100%;
}
.button__position--row--first {
  border-top-left-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 0;
  border-left-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.button__position--row--middle {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 0;
  border-right-width: 1px;
}
.button__position--row--last {
  border-top-left-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 10px;
  border-right-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 0px;
}
.button__position--column--first {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-left-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.button__position--column--middle {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
}
.button__position--column--last {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-right-width: 1px;
  border-top-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.button__arrow {
  color: inherit;
  background-color: inherit;
  height: 24px;
  margin-left: 2px;
}
.button__content {
  height: 20px;
  display: flex;
  align-items: center;
  z-index: 1;
}
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 0;
  border-radius: 8px;
}
.button__position--row--first::before {
  border-top-left-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 0;
}
.button__position--row--middle::before {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.button__position--row--last::before {
  border-top-left-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 10px;
}
.button__position--column--first::before {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.button__position--column--middle::before {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.button__position--column--last::before {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.button .hide {
  cursor: not-allowed;
  opacity: 0;
}

.focus:focus-visible {
  display: flex;
  position: absolute;
  border: 2px solid var(--color-focus, #c226fb);
  border-radius: 4px;
  width: 100%;
  height: 100%;
  top: -4px;
  left: -4px;
  padding-right: 4px;
  padding-bottom: 4px;
  outline: none;
}

.disabled {
  pointer-events: none;
}