@keyframes loading {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.button {
  font: var(--grapes-body-m);
  transition-property: background-color, color;
  transition-duration: var(--grapes-transition-duration);
  transition-timing-function: var(--grapes-transition-timing-function);

  height: var(--grapes-unit-40);
  position: relative;
  border-radius: var(--grapes-border-radius-8);
  text-decoration: none;
  overflow: hidden;
  z-index: 0;
  cursor: pointer;

  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: var(--grapes-unit-8) var(--grapes-unit-16);
  border: 1px solid transparent; /* Transparent border, so that default button and disabled button have the same height */

  &:focus {
    outline: 0;
  }
  &:focus-visible {
    outline: var(--grapes-focus-ring);
    outline-offset: var(--grapes-focus-ring-offset);
  }

  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 0;
    left: 0;
    top: 0;
    bottom: 0;
  }
}

.button[data-variant]:disabled {
  &:not(.loadingButton) {
    cursor: not-allowed;
    background-color: var(--grapes-color-background-primary-disabled);
    border: 1px solid var(--grapes-color-border-default);
    box-shadow: none;
    color: var(--grapes-color-content-secondary-bg-secondary);
    -webkit-text-fill-color: var(--grapes-color-content-secondary-bg-secondary);
  }
}

.button[data-variant^='tertiary']:disabled {
  &:not(.loadingButton) {
    background-color: transparent;
    border-color: transparent;
  }
}

.negativeMarginsButton {
  margin: 0 calc(-1 * var(--grapes-unit-16));
}

.parentFitButton {
  width: 100%;
}

.negativeMarginsButton.parentFitButton {
  width: calc(100% + 2 * var(--grapes-unit-8));
}

.loadingButton {
  cursor: progress;

  &::before {
    animation: loading 1s infinite;
  }
}

.noHorizontalPaddingButton {
  padding-left: 0;
  padding-right: 0;
}

.leftButtonInnerIcon {
  margin-right: var(--grapes-unit-8);
}

.rightButtonInnerIcon {
  margin-left: var(--grapes-unit-8);
}

.button[data-variant='primaryBrand'] {
  background-color: var(--grapes-color-background-primary-brand-default);
  color: var(--grapes-color-content-complementary);

  &:hover {
    background-color: var(--grapes-color-background-primary-brand-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-primary-brand-pressed);
  }
  &::before {
    background: var(--grapes-color-background-primary-brand-pressed);
  }
}
.button[data-variant='primaryInfo'] {
  background-color: var(--grapes-color-background-primary-info-default);
  color: var(--grapes-color-content-complementary);

  &:hover {
    background-color: var(--grapes-color-background-primary-info-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-primary-info-pressed);
  }
  &::before {
    background: var(--grapes-color-background-primary-info-pressed);
  }
}
.button[data-variant='primarySuccess'] {
  background-color: var(--grapes-color-background-primary-success-default);
  color: var(--grapes-color-content-complementary);

  &:hover {
    background-color: var(--grapes-color-background-primary-success-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-primary-success-pressed);
  }
  &::before {
    background: var(--grapes-color-background-primary-success-pressed);
  }
}
.button[data-variant='primaryWarning'] {
  background-color: var(--grapes-color-background-primary-warning-default);
  color: var(--grapes-color-content-complementary);

  &:hover {
    background-color: var(--grapes-color-background-primary-warning-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-primary-warning-pressed);
  }
  &::before {
    background: var(--grapes-color-background-primary-warning-pressed);
  }
}
.button[data-variant='primaryAlert'] {
  background-color: var(--grapes-color-background-primary-alert-default);
  color: var(--grapes-color-content-complementary);

  &:hover {
    background-color: var(--grapes-color-background-primary-alert-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-primary-alert-pressed);
  }
  &::before {
    background: var(--grapes-color-background-primary-alert-pressed);
  }
}

.button[data-variant^='secondary'] {
  background-color: var(--grapes-color-background-primary-default);
  border: 1px solid var(--grapes-color-border-default);
  box-shadow: var(--grapes-elevation-xs);

  &:hover {
    background-color: var(--grapes-color-background-primary-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-primary-pressed);
  }
  &::before {
    background: var(--grapes-color-background-primary-pressed);
  }
}
.button[data-variant='secondaryBrand'] {
  color: var(--grapes-color-content-brand-default);
}
.button[data-variant='secondaryNeutral'] {
  color: var(--grapes-color-content-primary);
}
.button[data-variant='secondaryInfo'] {
  color: var(--grapes-color-content-info-default);
}
.button[data-variant='secondarySuccess'] {
  color: var(--grapes-color-content-success-default);
}
.button[data-variant='secondaryWarning'] {
  color: var(--grapes-color-content-warning-default);
}
.button[data-variant='secondaryAlert'] {
  color: var(--grapes-color-content-alert-default);
}

.button[data-variant^='tertiary'] {
  background-color: transparent;
}
.button[data-variant='tertiaryBrand'] {
  color: var(--grapes-color-content-brand-default);

  &:hover {
    background-color: var(--grapes-color-background-secondary-brand-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-secondary-brand-pressed);
  }
  &::before {
    background: var(--grapes-color-background-secondary-brand-pressed);
  }
}
.button[data-variant='tertiaryNeutral'] {
  color: var(--grapes-color-content-primary);

  &:hover {
    background-color: var(--grapes-color-background-tertiary-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-tertiary-pressed);
  }
  &::before {
    background: var(--grapes-color-background-tertiary-pressed);
  }
}
.button[data-variant='tertiaryInfo'] {
  color: var(--grapes-color-content-info-default);

  &:hover {
    background-color: var(--grapes-color-background-secondary-info-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-secondary-info-pressed);
  }
  &::before {
    background: var(--grapes-color-background-secondary-info-pressed);
  }
}
.button[data-variant='tertiarySuccess'] {
  color: var(--grapes-color-content-success-default);

  &:hover {
    background-color: var(--grapes-color-background-secondary-success-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-secondary-success-pressed);
  }
  &::before {
    background: var(--grapes-color-background-secondary-success-pressed);
  }
}
.button[data-variant='tertiaryWarning'] {
  color: var(--grapes-color-content-warning-default);

  &:hover {
    background-color: var(--grapes-color-background-secondary-warning-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-secondary-warning-pressed);
  }
  &::before {
    background: var(--grapes-color-background-secondary-warning-pressed);
  }
}
.button[data-variant='tertiaryAlert'] {
  color: var(--grapes-color-content-alert-default);

  &:hover {
    background-color: var(--grapes-color-background-secondary-alert-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-secondary-alert-pressed);
  }
  &::before {
    background: var(--grapes-color-background-secondary-alert-pressed);
  }
}
.button[data-variant='tertiaryComplementary'] {
  color: var(--grapes-color-content-complementary);

  &:hover {
    background-color: var(--grapes-color-background-tertiary-hover);
  }
  &:active {
    background-color: var(--grapes-color-background-tertiary-pressed);
  }
  &::before {
    background: var(--grapes-color-background-tertiary-pressed);
  }
}