/*
  button component

  general styling
  icon
  text modifications inside the button
  invisible label in button for screen readers
  small variant
  secondary variant
  danger variant
  confirmation variant
*/


/* general styling
============================================================================ */
.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pos-gap-s-button, 8px);
  box-sizing: border-box;

  user-select: none;

  border-radius: var(--pos-corner-button, 4px);
  border: 1px solid var(--pos-color-button-primary-stroke-normal);
  background-color: var(--pos-color-button-primary-fill-normal);

  text-decoration: none;
  text-align: center;
  color: var(--pos-color-button-primary-text-normal);

  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
  position: relative;
  overflow: hidden;
}

.button_inverted {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pos-gap-s-button, 8px);
  box-sizing: border-box;

  user-select: none;

  border-radius: var(--pos-corner-button, 4px);
  background-color: var(--pos-color-dark-button-primary-fill-normal);
  border: none;
  text-decoration: none;
  text-align: center;
  color: #2173c4;

  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
  position: relative;
  overflow: hidden;
}

.pos-theme-dark .button_inverted {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pos-gap-s-button, 8px);
  box-sizing: border-box;

  user-select: none;

  border-radius: var(--pos-corner-button, 4px);
  background-color: #141414;
  border: none;
  text-decoration: none;
  text-align: center;
  color: #FFFFFF;

  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
  position: relative;
  overflow: hidden;
}

.button_inverted:not(:disabled):hover {
  background-color: var(--pos-color-button-primary-fill-hover);

  color: var(--pos-color-button-primary-text-hover);

  border-radius: var(--pos-corner-button, 4px);
  border: 1px solid var(--pos-color-button-primary-stroke-hover, #374151);
  background: var(--pos-color-button-primary-fill-hover, #374151);
  box-shadow: 0px 5px 30px 0px #2173C4;
  transition: all 0.3s ease-in-out;
}

.button a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 11px 16px 12px 16px;
}

button:not([disabled]) {
  cursor: pointer;
}

.button:not(:disabled):hover {
  background-color: var(--pos-color-button-primary-fill-hover);

  color: var(--pos-color-button-primary-text-hover);

  border-radius: var(--pos-corner-button, 4px);
  border: 1px solid var(--pos-color-button-primary-stroke-hover, #374151);
  background: var(--pos-color-button-primary-fill-hover, #374151);
  box-shadow: 0px 5px 30px 0px #2173C4;
  transition: all 0.3s ease-in-out;
}

.button:focus-visible {
  box-shadow: 0 0 1px 2px var(--pos-color-shadow);
}

.button.active,
.button:hover:active {
  background-color: var(--pos-color-button-primary-fill-hover);
}



/* icon
============================================================================ */
.button svg {
  width: 18px;
  height: 18px;
  margin-block: -.04rem;

  pointer-events: none;

}

.button:not(:disabled):hover svg {
  color: var(--color-interaction);
}

.button:disabled svg {
  color: var(--color-text-secondary);
}



/* text modifications inside the button
============================================================================ */
.button small {
  display: block;
  font-size: .625rem;
}



/* invisible label in button for screen readers
============================================================================ */
.button .label,
button .label {
  position: absolute;
  left: -100vw;
}



/* small variant
============================================================================ */
.button.compact {
  min-height: 36px;
}



/* secondary variant
============================================================================ */
.button.secondary {
  border: 2px solid var(--pos-color-button-secondary-stroke-normal);
  border-width: 2px;
  background-color: var(--pos-color-button-secondary-fill-normal);

  color: var(--pos-color-button-secondary-text-normal);
}

.button.secondary:not(:hover) {
  border-color: transparent;
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--pos-color-button-secondary-stroke-normal) inset;
}

.button.button.secondary a {
  color: inherit;
}

.button.secondary:not(:disabled):hover {
  color: var(--pos-color-button-secondary-text-hover);

  border-radius: var(--pos-corner-button, 4px);
  border: 2px solid var(--pos-color-button-secondary-stroke-hover, #6B7280);
  background: var(--pos-color-button-secondary-fill-hover, rgba(255, 255, 255, 0.00));
  box-shadow: none;
  transition: all 0.3s ease-in-out;
}



/* danger variant
============================================================================ */
.button.danger {
  background-color: var(--pos-color-important-normal);

  color: var(--color-text-inverted);
}



/* confirmation variant
============================================================================ */
.button.confirmation {
  background-color: var(--pos-color-confirmation-normal);

  color: var(--color-text-inverted);
}

.button-padding {
  padding: 11px 16px 12px 16px
}