.workflow-btn-group {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  // padding: 8px 0;
}

.workflow-btn {
  padding: 6px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s;
  min-width: 95px;
  min-height: 33px;

  &:hover {
    opacity: 0.85;
  }

  &:active {
    opacity: 0.7;
  }

  &.approve {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-right: calc(var(--space-m) *1px);
    padding-left: calc(var(--space-m) *1px);
    min-height: calc(var(--space-3xl) *1px);
    background-color: var(--status-success-text);
    color: var(--status-success-bg);
    border: 1px solid transparent;
    border-radius: calc(var(--size-radius-s) *1px);
    cursor: pointer;
    white-space: nowrap;

    &:hover{
      background-color: var(--text-status-success);
    }
  }

  &.reject {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-right: calc(var(--space-m) *1px);
    padding-left: calc(var(--space-m) *1px);
    min-height: calc(var(--space-3xl) *1px);
    background-color: var(--status-error-text);
    color: var(--status-error-bg);
    border: 1px solid transparent;
    border-radius: calc(var(--size-radius-s) *1px);
    cursor: pointer;
    white-space: nowrap;

    &:hover{
      background-color: var(--text-status-error);
    }
  }

  &.resend {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-right: calc(var(--space-m) *1px);
    padding-left: calc(var(--space-m) *1px);
    min-height: calc(var(--space-3xl) *1px);
    background-color: var(--status-warning-bg);
    color: var(--text-status-warning);
    border: 1px solid var(--status-warning-border);
    border-radius: calc(var(--size-radius-s) *1px);
    cursor: pointer;
    white-space: nowrap;

    &:hover{
      background-color: var(--text-status-warning);
      border: 1px solid var(--text-status-warning);
      color: var(--status-warning-bg);
    }
  }

  &.ask {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-right: calc(var(--space-m) *1px);
    padding-left: calc(var(--space-m) *1px);
    min-height: calc(var(--space-3xl) *1px);
    background-color: var(--button-secondary-bg-default);
    color: var(--button-secondary-text-default);
    border: 1px solid var(--button-secondary-border-default);
    border-radius: calc(var(--size-radius-s) *1px);
    cursor: pointer;
    white-space: nowrap;

    &:hover{
      background-color: var(--button-secondary-bg-hover);
    }
  }
}