button.button-secondary {
  border-color: var(--color-border-neutral-default);
}

.loader__wrapper {
  position: absolute;
  border: none;
  opacity: 0;
  transition: var(--show-transition) opacity;
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  background-color: var(--elevation-background-color, var(--color-accent-surface-surface));
  padding: var(--spacing-padding-xxxl);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--color-text-neutral-default);
  z-index: 99;
  animation: fadeIn var(--timing-fast) forwards;
}
.loader__wrapper--visible {
  opacity: 1;
}
.loader__spinner {
  border: 4px solid var(--elevation-border-color, var(--color-border-surface-on-surface));
  border-block-start: 4px solid var(--color-border-primary-default);
  border-radius: 50%;
  animation: spinner 0.6s infinite linear;
  inline-size: 32px;
  block-size: 32px;
  flex-shrink: 0;
  opacity: 1;
}
.loader__content-wrapper {
  display: flex;
  text-align: center;
  flex-direction: column;
  margin-block-start: 16px;
  gap: var(--spacing-gap-m);
  max-block-size: 400px;
  opacity: 1;
}
.loader__content-wrapper--hidden {
  display: none;
}
.loader__cancel-button {
  margin-block-start: 8px;
}

/*background color animation*/
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
}