.d-btn {
  box-shadow: none;
  outline: none;
  background: none;
  border: none;
  padding: 10px 16px;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  text-transform: none;
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: fit-content;
  @extend .d-text-component;

  [icon-left=""] {
    margin-right: 4px;
  }

  [icon-right=""] {
    margin-left: 4px;
  }
}

.d-btn-small {
  font-size: 12px;
  line-height: 12px;
  padding: 8px 16px;
  height: 28px;

  &.d-btn-icon {
    width: 28px;
  }
}

.d-btn-medium {
  font-size: 14px;
  line-height: 16px;
  height: 40px;

  &.d-btn-icon {
    width: 40px;
  }
}

.d-btn-large {
  font-size: 16px;
  line-height: 20px;
  height: 44px;

  &.d-btn-icon {
    width: 44px;
  }
}

.d-btn-primary {
  background-color: var(--d-color-red-50);
  border: 1px solid var(--d-color-red-50);
  color: var(--d-color-neutral-00);
  &:hover,
  &:focus-visible {
    background-color: var(--d-color-red-70);
    border-color: var(--d-color-red-70);
    color: var(--d-color-neutral-00);
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  }
  &:active {
    background-color: var(--d-color-red-80);
    border-color: var(--d-color-red-80);
  }
  &:disabled.d-btn-loading,
  &.d-btn-loading {
    background-color: var(--d-color-red-30);
    border-color: var(--d-color-red-30);
    color: var(--d-color-neutral-10);
    box-shadow: none;
    cursor: not-allowed;
  }
  &:disabled,
  &.d-btn-disabled {
    background-color: var(--d-color-neutral-20);
    color: var(--d-color-neutral-40);
    border-color: var(--d-color-neutral-20);
    box-shadow: none;
    cursor: not-allowed;
  }
}

.d-btn-secondary {
  background-color: var(--d-color-neutral-00);
  border: 1px solid var(--d-color-red-50);
  color: var(--d-color-red-60);
  &:hover,
  &:focus-visible {
    background-color: var(--d-color-neutral-00);
    border-color: var(--d-color-red-70);
    color: var(--d-color-red-70);
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  }
  &:active {
    background-color: var(--d-color-neutral-00);
    border-color: var(--d-color-red-80);
    color: var(--d-color-red-80);
  }
  &:disabled.d-btn-loading,
  &.d-btn-loading {
    background-color: var(--d-color-red-30);
    border-color: var(--d-color-red-30);
    color: var(--d-color-neutral-10);
    box-shadow: none;
    cursor: not-allowed;
  }
  &:disabled,
  &.d-btn-disabled {
    background-color: var(--d-color-neutral-20);
    color: var(--d-color-neutral-40);
    border-color: var(--d-color-neutral-20);
    box-shadow: none;
    cursor: not-allowed;
  }
}

.d-btn-text {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--d-color-red-50);
  &:hover,
  &:focus-visible {
    background-color: var(--d-color-red-10);
    border-color: var(--d-color-red-10);
    color: var(--d-color-red-60);
  }
  &:active {
    background-color: transparent;
    border-color: transparent;
    color: var(--d-color-red-80);
  }
  &:disabled.d-btn-loading,
  &.d-btn-loading {
    background-color: transparent;
    border-color: transparent;
    color: var(--d-color-red-30);
    box-shadow: none;
    cursor: not-allowed;
  }
  &:disabled,
  &.d-btn-disabled {
    background-color: transparent;
    color: var(--d-color-neutral-30);
    border-color: transparent;
    box-shadow: none;
    cursor: not-allowed;
  }
}

.d-btn-normal {
  background-color: var(--d-color-neutral-00);
  border: 1px solid var(--d-color-neutral-30);
  color: var(--d-color-neutral-80);
  &:hover,
  &:focus-visible {
    color: var(--d-color-neutral-80);
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  }
  &:active {
    background-color: var(--d-color-neutral-10);
    border-color: var(--d-color-neutral-50);
    box-shadow: none;
  }
  &:disabled.d-btn-loading,
  &.d-btn-loading {
    background-color: var(--d-color-neutral-00);
    border-color: var(--d-color-neutral-30);
    color: var(--d-color-neutral-80);
    box-shadow: none;
    cursor: not-allowed;
  }
  &:disabled,
  &.d-btn-disabled {
    background-color: var(--d-color-neutral-20);
    color: var(--d-color-neutral-40);
    border-color: var(--d-color-neutral-20);
    box-shadow: none;
    cursor: not-allowed;
  }
}

@keyframes d-btn-spinner {
  100% {
    rotate: 360deg;
  }
}

.d-btn-spinner {
  width: 1em;
  height: 1em;
  margin-right: 4px;
  span {
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 100%;
    animation: 0.75s linear infinite d-btn-spinner;
    width: inherit;
    height: inherit;
    display: inline-flex;
  }
}