.btn {
  --transitionDuration: 300ms;

  cursor: pointer;
  user-select: none;

  position: relative;

  display: inline-flex;
  gap: var(--gap--sm);
  align-items: center;
  justify-content: center;

  margin: 0;

  text-align: center;
  vertical-align: middle;

  appearance: none;
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--borderRadius--button);

  transition-timing-function: ease-out;
  transition-duration: var(--transitionDuration);
  transition-property: background-color, border-color, color;

  & > .btn--content {
    display: inherit;
    gap: inherit;
    align-items: inherit;
    justify-content: inherit;

    transition: opacity var(--transitionDuration) ease-out;
  }

  & > .loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    --transitionDuration: 0ms;
  }
}

.btn--isLoading > .btn--content {
  opacity: var(--blend--full--light);
}

.btn:hover {
  text-decoration: none;
}

.btn-lg {
  padding: calc(var(--padding--md) - 1px);

  font-family: var(--fontFamily--controls);
  font-size: var(--fontSize--controls-large);
  font-weight: var(--fontWeight--controls-large);
  line-height: var(--lineHeight--controls-large);
  letter-spacing: var(--letterSpacing--controls-large);

  // Needed for templates' usage of buttons that have no text inside, but only an icon
  &::before {
    font-size: var(--lineHeight--controls-large);
  }
}

.btn-md {
  padding: calc(var(--padding--xs) - 1px) calc(var(--padding--md) - 1px);

  font-family: var(--fontFamily--controls);
  font-size: var(--fontSize--controls-medium);
  font-weight: var(--fontWeight--controls-medium);
  line-height: var(--lineHeight--controls-medium);
  letter-spacing: var(--letterSpacing--controls-medium);

  // Needed for templates' usage of buttons that have no text inside, but only an icon
  &::before {
    font-size: var(--lineHeight--controls-medium);
  }
}

.btn-sm {
  padding: var(--padding--xs) calc(var(--padding--sm) - 1px);

  font-family: var(--fontFamily--controls);
  font-size: var(--fontSize--controls-small);
  font-weight: var(--fontWeight--controls-small);
  line-height: var(--lineHeight--controls-small);
  letter-spacing: var(--letterSpacing--controls-small);

  // Needed for templates' usage of buttons that have no text inside, but only an icon
  &::before {
    font-size: var(--lineHeight--controls-small);
  }
}

.btn-min {
  min-width: 52px;
  margin: 2px;
}
.btn-fullsize {
  padding-right: 0;
  padding-left: 0;
}

.btn-md.btn--iconLeft {
  padding-left: calc(var(--padding--sm) - 1px);
}
.btn-md.btn--iconRight {
  padding-right: calc(var(--padding--sm) - 1px);
}

.btn-md.btn-combobox,
.btn-lg.btn-combobox {
  padding-left: 25px;
}

.btn-primary {
  color: rgb(var(--foreground--neutral-full-default--dark)) !important;
  background-color: rgb(var(--background--controls-medium-default--light));

  &:hover {
    color: rgb(var(--foreground--neutral-full-hovered--dark)) !important;
    background-color: rgb(var(--background--controls-medium-hovered--light));
  }

  &:disabled,
  &.disabled,
  &[disabled],
  &.btn-disabled,
  &:disabled:hover,
  &.disabled:hover,
  &.btn-disabled:hover {
    background-color: rgb(var(--background--neutral-high-default--light));
  }
}

.btn-action {
  color: rgb(var(--foreground--neutral-full-default--dark)) !important;
  background-color: rgb(var(--background--main-medium-default--light));

  &:hover {
    background-color: rgb(var(--background--main-medium-hovered--light));
  }

  &:disabled,
  &.disabled,
  &.btn-disabled,
  &:disabled:hover,
  &.disabled:hover,
  &.btn-disabled:hover {
    background-color: rgb(var(--background--neutral-high-default--light));
  }
}

.btn-secondary {
  color: rgb(var(--foreground--neutral-full-default--light)) !important;
  background-color: rgb(var(--background--neutral-base-default--light));
  border-color: rgb(var(--border--neutral-high-default--light));

  &:hover {
    color: rgb(var(--foreground--neutral-full-hovered--light)) !important;
    border-color: rgb(var(--border--neutral-full-hovered--light));
  }

  &:disabled,
  &.disabled,
  &.btn-disabled,
  &:disabled:hover,
  &.disabled:hover,
  &.btn-disabled:hover {
    color: rgb(var(--foreground--neutral-full-default--dark)) !important;
    background-color: rgb(var(--background--neutral-high-default--light));
    border-color: rgb(var(--border--neutral-high-default--light));
  }

  &:active {
    border-color: rgb(var(--border--controls-medium-selected--light));
  }
}

.btn-destructive {
  color: rgb(var(--foreground--neutral-full-default--dark)) !important;
  background-color: rgb(var(--background--critical-xHigh-default--light));

  &:hover {
    background-color: rgb(var(--background--critical-high-hovered--light));
  }

  &:disabled,
  &.disabled,
  &.btn-disabled,
  &:disabled:hover,
  &.disabled:hover,
  &.btn-disabled:hover {
    background-color: rgb(var(--background--neutral-high-default--light));
  }
}

.btn:disabled,
.btn.disabled,
.btn.disabled:hover,
.btn.btn-disabled,
.btn.btn-disabled:hover {
  pointer-events: none;
  cursor: default;
}

.btn.disabled:focus,
.btn.btn-disabled:focus,
.btn:disabled:focus {
  outline: none;
}